ความรู้เบื้องต้นเกี่ยวกับการพัฒนาเว็บไซต์
1. มาตรฐานการเรียนรู้
สาระที่ 4 เทคโนโลยีสารสนเทศ
มาตรฐาน ง 4.1 เข้าใจ เห็นคุณค่าและใช้กระบวนการเทคโนโลยีสารสนเทศ ในการสืบค้นข้อมูล การเรียนรู้ การสื่อสาร การแก้ปัญหา การทำงานและอาชีพอย่างมีประสิทธิภาพ ประสิทธิผลและมีคุณธรรม
2. สาระสำคัญ ความหมายของคำหลักหรือคำสำคัญ (Key word) ที่เกี่ยวกับเว็บไซต์ หลักการออกแบบเว็บไซต์ที่ถูกต้อง รวมถึงข้อผิดพลาดในการออกแบบเว็บไซต์ เป็นความรู้เบื้องต้นที่ผู้เรียนควรทราบ เพื่อนำไปใช้ในการออกแบบและพัฒนาเว็บไซต์
3. ผลการเรียนรู้ที่คาดหวัง
มีความรู้ความเข้าใจเกี่ยวกับการออกแบบและพัฒนาเว็บไซต์ได้
4. จุดประสงค์การเรียนรู้
1. บอกความหมายของคำเกี่ยวกับเว็บไซต์ได้
2. วิจารณ์เว็บไซต์ตามหลักวิชาการได้
5. สาระการเรียนรู้
1. คำจำกัดความพื้นฐาน
2. หลักการออกแบบเว็บไซต์
3. ข้อผิดพลาดในการออกแบบเว็บไซต์
คำจำกัดความพื้นฐาน
ก่อนที่จะเรียนรู้การสร้างเว็บไซต์ ต้องรู้ถึงคำบางคำที่เกี่ยวข้องกับการพัฒนาเว็บไซต์ ดังนี้
เว็บเพจ (Web Page) หมายถึง เอกสารที่ประกอบไปด้วยข้อมูลที่เป็นอักษร เสียง และภาพต่างๆ ที่บรรจุในแฟ้มเอกสารแต่ละหน้าของเวิลด์ไวด์เว็บ (WWW) ที่เปิดอ่านจากโปรแกรม Browser
โฮมเพจ (HomePage) หมายถึง เว็บเพจหน้าแรกของเว็บไซต์ ข้อกำหนดที่เป็นมาตรฐานต้องมีชื่อไฟล์ว่า index.html หรือ index.htm
เว็บไซต์ (Website) ตำแหน่งที่อยู่ของเว็บเพจบนระบบอินเทอร์เน็ต ตัวอย่าง เช่น เว็บไซด์ของมหาวิทยาลัยนเรศวร ตำแหน่งที่อยู่ของเว็บ คือ www.nu.ac.th เว็บไซต์ของโรงเรียนนวมินทราชูทิศ มัชฌิม ตำแหน่งที่อยู่ของเว็บ www.nmm.ac.th เป็นต้น
Web Browser หมายถึงโปรแกรมใช้ในการแสดงผลภาษา HTML ให้แสดงในรูป World Wide Web ของอินเทอร์เน็ต เช่น Netscape Navigator, Internet Explorer
หลักการออกแบบเว็บไซต์
การออกแบบเว็บไซต์ คำนึงถึงความเหมาะสมกับกลุ่มบุคคลเป้าหมายผู้ใช้และลักษณะของเว็บไซต์ ความสะดวกในการใช้งาน
องค์ประกอบของการออกแบบเว็บไซต์ ต้องคำนึงถึง
1. ความเรียบง่าย ได้แก่ มีรูปแบบที่เรียบง่าย ไม่ซับซ้อน และใช้งานได้สะดวก ไม่มีกราฟิกหรือตัวอักษรที่เคลื่อนไหวอยู่ตลอดเวลา ชนิดและสีของตัวอักษรไม่มากจนเกินไปทำให้วุ่นวาย
2. ความสม่ำเสมอ ได้แก่ ใช้รูปแบบเดียวกันตลอดทั้งเว็บไซต์ เช่น รูปแบบของหน้า สไตล์ของกราฟิก ระบบเนวิเกชันและโทนสี ควรมีความคล้ายคลึงกันตลอดทั้งเว็บไซต์
3. ความเป็นเอกลักษณ์ การออกแบบเว็บไซต์ควรคำนึงถึงลักษณะขององค์กร เพราะรูปแบบของเว็บไซต์จะสะท้อนถึงเอกลักษณ์และลักษณะขององค์กรนั้น ๆ เช่น ถ้าเป็นเว็บไซต์ของทาง ราชการ จะต้องดูน่าเชื่อถือไม่เหมือนสวนสนุก ฯลฯ
4. เนื้อหาที่มีประโยชน์ เนื้อหาเป็นสิ่งที่สำคัญที่สุดในเว็บไซต์ ดังนั้นควร จัดเตรียมเนื้อหาและข้อมูลที่ผู้ใช้ต้องการให้ถูกต้อง และสมบูรณ์ มีการปรับปรุงและเพิ่มเติมให้ทันเหตุการณ์อยู่เสมอ เนื้อหาไม่ควรซ้ำกับเว็บไซต์อื่น จึงจะดึงดูดความสนใจ
5. ระบบเนวิเกชันที่ใช้งานง่าย ต้องออกแบบให้ผู้ใช้เข้าใจง่ายและใช้งานสะดวก ใช้กราฟิกที่สื่อความหมายร่วมกับคำอธิบายที่ชัดเจน มีรูปแบบและลำดับของรายการที่สม่ำเสมอ เช่น วางไว้ ตำแหน่งเดียวกันของทุกหน้า
6. ลักษณะที่น่าสนใจ หน้าตาของเว็บไซต์จะต้องมีความสัมพันธ์กับคุณภาพขององค์ประกอบต่างๆ เช่น คุณภาพของกราฟิกที่จะต้องสมบูรณ์ การใช้สี การใช้ตัวอักษรที่อ่านง่าย สบายตา การใช้โทนสีที่เข้ากัน ลักษณะหน้าตาที่น่าสนใจนั้นขึ้นอยู่กับความชอบของแต่ละบุคคล
7. การใช้งานอย่างไม่จำกัด ผู้ใช้ส่วนใหญ่สามารถเข้าถึงได้มากที่สุด เลือกใช้บราวเซอร์ชนิดใดก็ได้ในการเข้าถึงเนื้อหา สามารถแสดงผลได้ทุกระบบปฏิบัติการและความละเอียดหน้าจอต่างๆ กันอย่างไม่มีปัญหา เป็นลักษณะสำคัญสำหรับผู้ใช้ที่มีจำนวนมาก
8. คุณภาพในการออกแบบ การออกแบบและเรียบเรียงเนื้อหาอย่างรอบคอบ สร้างความรู้สึกว่าเว็บไซต์มี….คุณภาพ ถูกต้อง และเชื่อถือได้
9. ระบบการใช้งานที่ถูกต้อง การใช้แบบฟอร์มสำหรับกรอกข้อมูลต้องสามารถกรอกได้จริง ใช้งานได้จริง ลิงค์ต่างๆ จะต้องเชื่อมโยงไปหน้าที่มีอยู่จริงและถูกต้อง ระบบการทำงานต่างๆ ในเว็บไซต์จะต้องมีความแน่นอนและทำหน้าที่ได้อย่างถูกต้อง
พื้นฐานในการออกแบบเว็บไซต์ที่ดี
มีเนื้อหาเป็นประโยชน์ ตรงกับที่ผู้ใช้ต้องการ มีการปรับปรุงเพิ่มเติมเนื้อหา และพัฒนาเว็บไซต์อยู่เสมอ ใช้เวลาในการดาวน์โหลดน้อย แสดงผลเร็ว ใช้งานที่สะดวก เข้าใจง่าย
โปรแกรมที่ใช้การสร้างเว็บไซต์
Macromedia Dreamweaver
Microsoft FrontPage
HomeSite
HotDog Pro
GoLive
NetObjects Fusion
CoffeeCup
ฯลฯ
ข้อผิดพลาดในการออกแบบเว็บไซต์
1. ใช้โครงสร้างหน้าเว็บเป็นระบบเฟรม การใช้กรอบ (Frame) เนื่องจากการใช้เฟรมมักจะมีญหาในการที่จะสร้างเว็บเพจ จึงไม่ควรนำมาใช้ แต่ในปัจจุบันขีดความสามารถของโปรแกรมที่ใช้สร้างเว็บเพจมากขึ้น ทำให้ปัญหาในข้อนี้หมดไป
2. ใช้เทคโนโลยีขั้นสูงโดยไม่จำเป็น ความเร็วในการโหลดเว็บเพจ สิ่งที่ควรคำนึงถึงในการทำเว็บเพจอีกสิ่งหนึ่ง คือ ความเร็วในการโหลดเว็บเพจ ผู้เข้าชมไม่ควรใช้เวลานานเกินสมควร ในการรอให้โหลดเว็บเพจโดยเฉพาะอย่างยิ่งในหน้าแรกของการโหลด เพราะมีหลายครั้งผู้เข้าเยี่ยมชมจะหยุดการโหลด เว็บเพจและเปลี่ยนไปหาข้อมูลจากที่อื่น ซึ่งถือเป็นความผิดพลาดใหญ่หลวงของผู้ทำเว็บเพจ ปัจจัยที่จะกระทบต่อความเร็วได้แก่ ขนาดของรูปภาพที่ใช้, จำนวนของรูปภาพที่ใช้ และปริมาณของตัวอักษรที่อยู่บนหน้านั้น ๆ อนึ่งความเร็วในการโหลดเว็บเพจ อาจอยู่ที่ Server ที่เว็บเพจนั้นว่ามีความสามารถสูงเพียงใด ขนาดของรูปภาพที่ใช้ควรจะมีขนาดไม่เกิน 20 – 30 Kb. ต่อรูป ส่วนประกอบของรูปนั้นควรเป็น GIF หรือ JPEG ถ้าขนาดของรูปภาพใหญ่เกินไป อาจตัดแบ่งให้ขนาดเล็กลงและใช้ตารางช่วยในการจัดรูปภาพนั้น ๆ แต่ก็ไม่ควรมีจำนวนมากเกินไป เพราะนั่นก็เป็นสาเหตุหนึ่งที่ลดความเร็วของการโหลดเว็บเพจ
3. ใช้ตัวหนังสือหรือภาพที่เคลื่อนไหวตลอดเวลา การใช้เทคนิคต่าง ๆ มากเกินความจำเป็น เช่น ภาพเคลื่อนไหว หรือตัวอักษรวิ่ง (Marquees) นอกจากนี้มีความจำเป็นต้องใช้ประกอบเนื้อหา เนื่องจากเทคนิคเหล่านี้จะรบกวนการอ่านได้
4. มีที่อยู่เว็บไซต์ที่ซับซ้อน (URL) ยากต่อการจดจำ/พิมพ์ การใช้ยูอาร์แอลที่ซับซ้อนหรือยาวเกินไป ซึ่งจะไม่สะดวกต่อการพิมพ์ลงในช่องเเอดเดรส (Address)
5. ไม่มีการแสดงชื่อและที่อยู่ของเว็บไซต์ในหน้าเว็บเพจ
6. มีความยาวของหน้ามากเกินไป หน้าจอที่เป็นลักษณะการเลื่อนขึ้นลง (Scrolling) เนื่องจากมีเนื้อหายาวเกินไปทำให้ผู้ใช้ส่วนใหญ่ไม่ดูเนื้อหาที่อยู่ด้านลง เพราะฉะนั้นจึงควรเสนอเนื้อหาที่มีความสำคัญไว้ ด้านบนสุดในแต่ละหน้า
7. ขาดระบบเนวิเกชันที่มีประสิทธิภาพ เช่น แผนผังของเว็บไซต์หรือปุ่มควบคุมเส้นทาง ไม่ว่าจะเป็นเดินหน้า ถอยหลัง รวมทั้งการใช้เครื่องมือสืบค้น (Search Engine) ช่วยในการค้นหาหน้าที่ต้องการ และ การมีหน้าที่ไม่มีการเชื่อมโยง (Orphan Page) ทำให้ผู้ใช้ไม่รู้จะทำอย่างไร ต่อไป อย่างน้อยในแต่ละหน้า ควรจะทำตัวเชื่อมโยงที่กลับไปยัง โฮมเพจ(หน้าแรกของเว็บไซต์) ได้
8. ใช้สีของลิงก์ไม่เหมาะสม สีของตัวเชื่อมโยงที่ไม่เป็นมาตรฐาน ทำให้เกิดความสับสนได้
9. ข้อมูลเก่าไม่มีการปรับปรุงให้ทันสมัย
10. เว็บเพจแสดงผลช้า ใช้เวลาดาวน์โหลดนาน ผู้ใช้จะเกิดอาการเบื่อหน่ายและเลิกให้ความสนใจกับเว็บที่ใช้เวลาในการแสดงผลนาน สาเหตุเนื่องมาจาก การใส่รูปภาพขนาดใหญ่ ภาพเคลื่อนไหว ตัวอักษรวิ่ง และมีมากเกินไปต่อเอกสารหน้าเว็บ
แหล่งที่มาของข้อมูล
http://www.chaiwbi.com/0drem/unit01/152.html
http://www.chaiwbi.com/0drem/unit01/15object.html
http://www.chaiwbi.com/0drem/unit01/150.html
http://www.chaiwbi.com/0drem/unit01/151.html
http://t3.gstatic.com/images?q=tbn:bLKvsdb42rDOSM:http://web.naitam.com/web-images/login.jpg
http://www.chaiwbi.com/0drem/unit01/1101/345.jpg
http://www.chaiwbi.com/0drem/intro.htm
l
0 ความคิดเห็น:
แสดงความคิดเห็น