หลักการออกแบบพัฒนาผ่านเว็บไซต์
การออกแบบเว็บไซต์
การออกแบบเว็บไซต์ควรคำนึงถึงการใช้งานเป็นหลักเพื่อกำหนดองค์ประกอบภายในเว็บไม่ว่าจะออกแบบอย่างไร ความรู้เบื้องต้นเกี่ยวกับการสร้างเว็บเพจเป็นสิ่งจำเป็นซึ่งปัจจุบันสามารถทำได้ง่ายโดยไม่จำเป็นต้องพึ่งพาความรู้ทางการเขียนโปรแกรมภาษา HTML อย่างแต่ก่อน เพียงรู้หลักเบื้องต้นบ้างเล็กน้องก็เพียงพอที่จะพัฒนาเว็บเพจได้ดีในระดับหนึ่งแล้ว โปรแกรมที่จะช่วยพัฒนาเว็บมีอยู่มากมายพอสมควรที่จะเลือกใช้ได้ตามความถนัดของผู้ที่จะลองพัฒนาเว็บเพจ ดังนั้นเมื่อจะลองเริ่มต้นสร้างเว็บเพจให้มีความเหมาสมควรคำนึงสิ่งต่อไปนี้
การออกแบบเว็บไซต์ควรคำนึงถึงการใช้งานเป็นหลักเพื่อกำหนดองค์ประกอบภายในเว็บไม่ว่าจะออกแบบอย่างไร ความรู้เบื้องต้นเกี่ยวกับการสร้างเว็บเพจเป็นสิ่งจำเป็นซึ่งปัจจุบันสามารถทำได้ง่ายโดยไม่จำเป็นต้องพึ่งพาความรู้ทางการเขียนโปรแกรมภาษา HTML อย่างแต่ก่อน เพียงรู้หลักเบื้องต้นบ้างเล็กน้องก็เพียงพอที่จะพัฒนาเว็บเพจได้ดีในระดับหนึ่งแล้ว โปรแกรมที่จะช่วยพัฒนาเว็บมีอยู่มากมายพอสมควรที่จะเลือกใช้ได้ตามความถนัดของผู้ที่จะลองพัฒนาเว็บเพจ ดังนั้นเมื่อจะลองเริ่มต้นสร้างเว็บเพจให้มีความเหมาสมควรคำนึงสิ่งต่อไปนี้
สิ่งที่ต้องคำนึงถึงในการออกแบบโฮมเพจที่ดี
1. ความแปลก ความแตกต่าง (Contrast) คือแยกความแตกต่างที่อยู่บนจอภาพให้เห็นชัดเจน
2. การย้ำซ้ำ (Repetition) คือแบบแผนหรือสไตล์ของผู้ออกแบบ จะต้องมีลักษณะรูปแบบ สอดคล้องกันทั้งหมด
3. การจัดแถว การวางแนว (Alignment) คือ การจัดวางองค์ประกอบต่าง ๆ ต้องไม่สะเปะสะปะ
4. ความใกล้เคียง ความเกี่ยวเนื่อง (Proximity) คือ การจัดวางองค์ประกอบที่เกี่ยวเนื่องกัน ให้เป็นกลุ่มก้อนเดียวกัน
องค์ประกอบของการออกแบบเว็บไซต์
ต้องคำนึงถึง
1. ความเรียบง่าย ได้แก่ มีรูปแบบที่เรียบง่าย ไม่ซับซ้อน และใช้งานได้สะดวก
2. ความสม่ำเสมอ ได้แก่ ใช้รูปแบบเดียวกันตลอดทั้งเว็บไซต์
3. ความเป็นเอกลักษณ์ การออกแบบเว็บไซต์ควรคำนึงถึงลักษณะขององค์กร
4. เนื้อหาที่มีประโยชน์ นื้อหาเป็นสิ่งที่สำคัญที่สุดในเว็บไซต์ ดังนั้นควร
- จัดเตรียมเนื้อหาและข้อมูลที่ผู้ใช้ต้องการให้ถูกต้อง และสมบูรณ์
- มีการปรับปรุงและเพิ่มเติมให้ทันเหตุการณ์อยู่เสมอ
- เนื้อหาไม่ควรซ้ำกับเว็บไซต์อื่น จึงจะดึงดูดความสนใจ
5. ระบบเนวิเกชันที่ใช้งานง่าย ต้องออกแบบให้ผู้ใช้เข้าใจง่ายและใช้งานสะดวก
- ใช้กราฟิกที่สื่อความหมายร่วมกับคำอธิบายที่ชัดเจน
- มีรูปแบบและลำดับของรายการที่สม่ำเสมอ เช่น วางไว้ ตำแหน่งเดียวกันของทุกหน้า
6. ลักษณะที่น่าสนใจ หน้าตาของเว็บไซต์จะต้องมีความสัมพันธ์กับคุณภาพขององค์ประกอบต่างๆ
7. การใช้งานอย่างไม่จำกัด ผู้ใช้ส่วนใหญ่สามารถเข้าถึงได้มากที่สุด
- เลือกใช้บราวเซอร์ชนิดใดก็ได้ในการเข้าถึงเนื้อหา
- สามารถแสดงผลได้ทุกระบบปฏิบัติการและความละเอียดหน้าจอต่างๆ กันอย่างไม่มีปัญหาเป็นลักษณะสำคัญสำหรับผู้ใช้ที่มีจำนวนมาก
8. คุณภาพในการออกแบบ การออกแบบและเรียบเรียงเนื้อหาอย่างรอบคอบ
9. ระบบการใช้งานที่ถูกต้อง การใช้แบบฟอร์มสำหรับกรอกข้อมูลต้องสามารถกรอกได้จริง ใช้งานได้จริง
นอกจากความสวยงามแล้วสิ่งที่ต้องคำนึงถึงคือ
1. มีสารบัญแสดงรายละเอียดของเว็บเพจนั้น
2. เชื่อมโยงข้อมูลไปยังเป้าหมายได้ตรงกับความต้องการ
3. เนื้อหากระชับ สั้น ทันสมัย
4. สามารถตอบโต้กับผู้ใช้ได้ทันท่วงที
5. มีรูปภาพประกอบการนำเสนอที่ดี ไม่ควรมีรูปภาพมากเกินไป
6. เข้าสู่กลุ่มเป้าหมายได้อย่างถูกต้อง
7. ใช้งานง่าย
8. เป็นมาตรฐานเดียวกัน
ขั้นตอนการพัฒนาเว็บเพจ
ขั้นตอนการพัฒนาเว็บเพจ
1. วางแผน/กำหนดข้อหัว และเนื้อหาที่นำเสนอ
2. สร้างผังความสัมพันธ์ของข้อมูลแบบรากต้นไม้
3. กำหนดชื่อไฟล์ของเอกสารเว็บ
4. สร้างโฟลเดอร์เฉพาะสำหรับเอกสารเว็บแต่ละชุด/เรื่อง ในโฟลเดอร์ที่สร้าง
4. สร้างโฟลเดอร์เฉพาะสำหรับเอกสารเว็บแต่ละชุด/เรื่อง ในโฟลเดอร์ที่สร้าง
5. จัดหาภาพหรือสร้างภาพที่เกี่ยวข้องกับเนื้อหา
6. ภาพที่เลือกใช้ทั้งหมด ต้องเก็บไว้ในโฟลเดร์ที่สร้างไว้ก่อนแล้ว
7. สร้างเอกสารเว็บ โดยลงรหัส HTML หรือใช้โปรแกรมสร้างเว็บช่วย
7.1 การสร้างเว็บเพจ โดยลงรหัส HTML
- ใช้ภาษา HTML โดยป้อนคำสั่งภาษา HTML ด้วยโปรแกรม Text Editor เช่น NotePad
- ใส่คำสั่งได้ตามต้องการ
- ไม่เหมาะสำหรับผู้พัฒนาในระดับต้น
7.2 .ใช้โปรแกรมสร้างเอกสร้างเว็บ เช่น Macromedia Dreamweaver
- ไม่ต้องศึกษาภาษา HTML
- จุดด้อยคือ โปรแกรมจะไม่รู้จักคำสั่ง HTML ใหม่ๆ
8. ภาษาไทยกับการสร้างเว็บ เลือกรูปแบบการเข้ารหัสภาษาไทยที่ถูกต้อง
9. กำหนดฟอนต์ให้กับข้อมูล เพื่อให้แสดงผลภาษาไทยได้ถกต้อง
10. ไฟล์เอกสาร HTML ทุกไฟล์ต้องบันทึกไว้ในโฟลเดอร์ที่สร้างไว้ก่อน รวมกับรูปภาพที่จัดเตรียมไว้แล้ว
11. ตรวจสอบผลเอกสาร HTML ด้วยเบราเซอร์ซึ่งมีหลายค่ายหลายรุ่น เว็บเบราเซอร์แต่ละค่าย แต่ละรุ่น จะรู้จักคำสั่ง HTML ไม่เท่ากัน
12. ส่งข้อมูลขึ้นเครื่องคอมพิวเตอร์แม่ข่าย (server)
13. ตรวจสอบผลของเครื่องคอมพิวเตอร์ลูกข่ายที่เรียกดูข้อมูลจากเครื่องแม่ข่ายการวางแผน
1. ควรมีรายการสารบัญแสดงรายละเอียดของเว็บเพจนั้น
2. เชื่อมโยงข้อมูลไปยังเป้าหมายได้ตรงกับความต้องการมากที่สุด
3. เนื้อหากระชับ สั้นและทันสมัย
4. สามารถโต้ตอบกับผู้ใช้ได้อย่างทันท่วงที
5. การใส่ภาพประกอบ
6. เข้าสู่กลุ่มเป้าหมายได้อย่างถูกต้อง
7. ใช้งานง่าย
เว็บเพจที่ถูกสร้างขึ้นมานั้น อาจจะมีจำนวนข้อมูลมากมายหลายหน้า การทำให้ผู้ใช้งานไม่เกิดความสับสนกับข้อมูลนั้น จำเป็นต้องกำหนดข้อมูลให้เป็นมาตรฐานเดียวกัน โดยอาจแบ่งเนื้อหาออกเป็นส่วนๆ ไป หรือจัดเป็นกลุ่ม เป็นหมวดหมู่ เพื่อความเป็นระเบียบน่าใช้งาน
พื้นฐานในการออกแบบเว็บไซต์ที่ดี มีเนื้อหาเป็นประโยชน์ ตรงกับที่ผู้ใช้ต้องการ มีการปรับปรุงเพิ่มเติมเนื้อหา และพัฒนาเว็บไซต์อยู่เสมอ ใช้เวลาในการดาวน์โหลดน้อย แสดงผลเร็ว ใช้งานที่สะดวก เข้าใจง่าย
พื้นฐานในการออกแบบเว็บไซต์ที่ดี มีเนื้อหาเป็นประโยชน์ ตรงกับที่ผู้ใช้ต้องการ มีการปรับปรุงเพิ่มเติมเนื้อหา และพัฒนาเว็บไซต์อยู่เสมอ ใช้เวลาในการดาวน์โหลดน้อย แสดงผลเร็ว ใช้งานที่สะดวก เข้าใจง่าย
โปรแกรมที่ใช้การสร้างเว็บไซต์
1. Dreamweaver
2. FrontPage
3. HomeSite
4. HotDog Pro
5. GoLive
6. NetObjects Fusion
7. CoffeeCup
หลักการออกแบบ webpage
หลักการออกแบบ webpage
1. รูปภาพ (Graphic or Photo) การใช้รูปภาพในเว็บไซต์มีอยู่ 2 จุดประสงค์ คือ เพื่อเพิ่มความสวยงามและดึงดูดความสนใจในการเข้าชมเพื่อแสดงข้อมูล
2. แบบฟอร์ม (Form) ในการส่งข้อมูลผ่าน Web Site นอกเหนือการเขียน e-mail ยังสามารถส่งข้อมูลในแบบฟอร์มที่จัดทำอยู่ใน Web Site ได้
3. ภาพยนตร์และเสียงประกอบ (Movie and Sound) การเพิ่มภาพยนตร์และเสียงประกอบจะทำให้ Web Site มีความน่าสนใจและดึงดูดใจผู้เข้าชมมากขึ้น
4. ตัวนับ (Hit Counter) ใช้นับจำนวนผู้เข้าชม Web Site และทำการวัดประสิทธิภาพของการโฆษณาและประชาสัมพันธ์
5. กรอบ (Frame) เพื่อความสวยงามและความสะดวกในการใช้งาน
6. CGI Script เป็นการประมวลผลข้อมูลจากผู้ใช้ด้วย CGI หรือ Common Gateway Interface จะเป็นตัวกลาง ที่ทำหน้าที่เชื่อมโยง Web Site กับผู้ใช้เพื่อใช้ในการเก็บข้อมูล
7. จาวา (Java) เป็นภาษาที่สามารถทำงานโดยไม่ขึ้นกับแพลตฟอร์ม โดย Java จะนำมาใช้สำหรับการโต้ตอบกับระบบ Multimedia
สรุปการออกแบบเว็บและโฮมเพจต้องอาศัยความเข้าใจเบื้องต้นได้แก่
1.รูปแบบการเชื่อมโยงที่นิยมใช้ในการพัฒนาเว็บ ( Link ) ซึ่งได้แก่
- การเชื่อโยงในไฟล์เดียวกัน
- การเชื่อโยงระหว่างไฟล์ HTML และไฟล์ HTML ด้วยกัน
- การเชื่อโยงจากไฟล์ HTML ไปยังเว็บอื่นๆ
2. การจัดทำภาพข้อความเพื่อนำเสนอในรูปแบบตั้งแต่เบื้อต้นจนถึงระดับที่สวยงามเร้าใจ
- ภาพที่ใช้ควรอยู่ในตระกูล jpg - gif
- การใช้ข้อความควรคำนึงถึงฟอนต์ ( Font ) ซี่งถ้าต้องการความสวยงาม ขนาดคงที่
3. การออกแบบไฟล์เริ่มต้นของ Homepage ในชื่อ index.htm หรือ .htm และเก็บไฟล์เป็นชุดหมวดหมู่เพื่อเรียกใช้งานง่ายและไม่เกิดปัญหาในการหาไฟล์ไม่พบ แล้วแสดงผลผิดพลาด
4. การทำเฟรม ( Frame ) การจัดทำเฟรมเป็นการคำนึงถึงผู้ใช้ จึงออกแบบให้เกิดการใช้งานได้สะดวกยิ่งขึ้นคือ
- ลดการคลิกเลื่อนจอภาพ ( Scrolling ) เพื่ออ่านข้อมูลยาวๆ ในหน้าจอได้
- จัดแบ่งพื้นที่บนจอให้เกิดระเบียบสวยงามน่าใช้และเป็นสัดส่วนอิสระจากกัน
แหล่งที่มาของข้อมูล
http://www.pm.ac.th/vrj/web/page_1.htm
http://www.pm.ac.th/vrj/web/page_1.htm
0 ความคิดเห็น