การออกแบบและพัฒนาเว็บเพจ

การออกแบบและพัฒนาเว็บเพจ

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

2 การจัดหน้า

2.1 กำหนดความยาวของหน้าให้สั้น ไม่ให้แต่ละหน้ายาวจนเกินไป

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

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

3 พื้นหลัง

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

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

4 ศิลปการใช้ตัวพิมพ์

4.1 ความจำกัดของการใช้ตัวพิมพ์ นักออกแบบจะถูกจำกัดในเรื่องของศิลปะ การใช้

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

4.2 ความแตกต่างระหว่างระบบและการใช้โปรแกรมค้นผ่าน (Web Browser) แต่

ละตัว จะมีตัวเลือกในการใช้แบบตัวอักษรที่แตกต่างกัน ซึ่งตรงนี้ผู้อ่านสามารถเปลี่ยนแปลงค่าต่างๆ ของแบบตัวอักษรได้ด้วยตัวเอง

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

4.4 ใช้ลักษณะกราฟิกแทนตัวอักษรธรรมดาให้น้อยที่สุด ถึงแม้จะสามารถใช้

ลักษณะ กราฟิกแทนตัวอักษรธรรมดาได้ก็ตาม แต่ไม่ควรใช้มากเกินกว่า 2-3 บรรทัด ทั้งนี้เพราะจะทำให้เสียเวลา ในการดาวน์โหลดมากกว่าปกติ

5 การออกแบบหน้าเว็บเพจ

5.1 การปรับแนว ( alignment) หมายถึง การที่สิ่งต่างๆบนหน้าเว็บเพจนั้นมาจัดเป็นแนวเดียวกัน ซึ่งมีข้อควรคำนึง คือ เลือกการปรับแนวเพียงแนวใดแนวหนึ่งเท่านั้นบนหน้าเว็บ เช่นการปรับชิดซ้าย ชิดขวา แนวกลาง หรือเสมอซ้าย ขวา อย่าใช้รูปแบบการจัดหลายแนวบนหน้าเว็บเพจเดียวกันเด็ดขาด

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

5.3 การย้ำ ( repetition) นักออกแบบจะต้องมีการย้ำข้อความหรือส่วนสำคัญที่เป็นสิ่งผูกผันกับส่วนต่างๆ ที่แยกจากกันไว้ตลอดทั้งเว็บไซท์นั้น หน้าเว็บเพจแต่ละหน้าควรมองดูแล้วมีลักษณะที่เหมือนกันตลอดทั้งเว็บไซท์และอยู่ในแนวคิดเดียวกัน

5.4 ความเปรียบต่าง ( contrast) เป็นสิ่งที่ดึงดูดสายตาผู้อ่านเข้าสู่เว็บเพจ สิ่งที่มีความเปรียบต่างกันจะนำเราไปรอบๆหน้าเว็บเพจ สร้างลำดับขั้นของสารสนเทศ ความเปรียบต่างอาจเป็นลักษณะของตัวอักษรที่มีขนาดหนา ขนาดใหญ่ หรือรูปแบบที่แตกต่างกันไปจากตัวอักษรอื่นส่วนของซอฟแวร์โปรแกรมที่ช่วยใช้ในการสร้างเว็บเพจนั้น ธวัชชัย (2544 : 20-21) แนะนำโปรแกรมช่วยสร้างเว็บที่นิยมกันในปัจจุบัน ดังต่อไปนี้Macromedia Dreamweaver เป็นโปรแกรมช่วยสร้างเว็บที่ดีที่สุดโปรแกรมหนึ่งในปัจจุบันเป็นที่นิยมใช้กันมากเนื่องจากมีประสิทธิภาพในการทำงานสูง ผู้ออกแบบสามารถออกแบบเว็บและสร้างเว็บไซท์ได้อย่างสะดวก โดยที่ไม่จำเป็นต้องมีความรู้เกี่ยวกับภาษา HTML และโปรแกรมนี้ยังมีเครื่องมือที่มีประโยชน์แถมมาด้วยคือ java script debugger ที่จะช่วยในการสร้างและแก้ไขสคริปต์ได้สะดวกยิ่งขึ้นMicrosoft Font Page เป็นโปรแกรมช่วยสร้างเว็บเพจที่เหมาะสำหรับเว็บไซท์ที่มีเนื้อหาอยู่ในรูปของโปรแกรม Microsoft Office เป็นส่วนใหญ่ เนื่องจากเครื่องมือและการทำงานใกล้เคียงกับโปรแกรมอื่นๆ ในชุด Office โดยสามารถเปลี่ยนไฟล์เอกสารที่เป็น Word, Excel, Access และPower point ให้เป็นไฟล์ HTML ได้อย่างง่ายดาย โปรแกรม Microsoft Font Page เป็นที่นิยมสำหรับผู้เริ่มต้นออกแบบเว็บไซท์Altair Home Site มีลักษณะเด่นในด้านที่ช่วยการเขียนโค้ดภาษา HTML ด้วยคุณสมบัติที่เรียกว่า tag insight และ function insight ซึ่งจะแสดงแอตทริบิวต์ ที่เหมาะสมขึ้นมาให้เลือกใช้กันเหมาะสำหรับนักออกแบบเว็บมืออาชีพที่ถนัดในการเขียนโค้ดภาษา HTML10.การหาประสิทธิภาพบทเรียนบนเว็บการสร้างบทเรียนบนเว็บ ก่อนที่จะนำไปใช้ในการเรียนการสอน ควรนำบทเรียนบนเว็บไปทดลองใช้ (Try – Out) ตามขั้นตอนที่กำหนด แล้วจึงปรับปรุงแก้ไขให้ได้มาตรฐานก่อนเพื่อจะได้ทราบว่าบทเรียนบนเว็บนั้นมีคุณภาพเพียงใด มีสิ่งใดที่ยังบกพร่องอยู่ โดยการนำบทเรียนไปทดลองกับกลุ่มตัวอย่างจากการใช้จริงการกำหนดเกณฑ์ประสิทธิภาพ