Lecture

กระบวนการพัฒนาเว็บไซต์

กระบวนการพัฒนาเว็บไซต์    

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

Phase 1 : สำรวจปัจจัยสำคัญ (Research)
1. รู้จักตัวเอง-กำหนดเป้าหมายและสำรวจความพร้อม
2 .เรียนรู้ผู้ใช้-ระบุกลุ่มผู้ใช้และศึกษาความต้องการ
3. ศึกษาคู่แข่ง-สำรวจการแข่งขันและการเรียนรู้คู่แข่ง
สิ่งที่ได้รับ 
1. เป้าหมายหลักของเว็บ
2. ความต้องการของผู้ใช้
3 .กลยุทธ์ในการแข่งขัน

Phase 2 : พัฒนาเนื้อหา (Site Content)
4 .สร้างกลยุทธ์การออกแบบ
5 .หาข้อสรุปขอบเขตเนื้อหา
สิ่งที่ได้รับ 
1. แนวทางการออกแบบเว็บ
2. ขอบเขตเนื้อหาและการใช้งาน
3. ข้อมูลที่ถูกจัดอย่างเป็นระบบ

Phase 3 : พัฒนาโครงสร้างเว็บไซต์ (Site Structure)
6. จัดระบบข้อมูล
7. จัดทำโครงสร้างข้อมูล
8. พัฒนาระบบเนวิเกชัน
สิ่งที่ได้รับ 
1. แนวทางการออกแบบเว็บ
2. ขอบเขตเนื้อหาและการใช้งาน
3. ข้อมูลที่ถูกจัดอย่างเป็นระบบ 7

Phase 4 : ออกแบบและพัฒนาหน้าเว็บ (Visual Design)
9. ออกแบบลักษณะหน้าตาเว็บ
10. พัฒนาเว็บต้นแบบและข้อกำหนดสุดท้าย
สิ่งที่ได้รับ 
1. ลักษณะหน้าตาของเว็บ
2. เว็บต้นแบบที่จะใช้ในการพัฒนา
3. รูปแบบโครงสร้างของเว็บ
4. ข้อกำหนดในการพัฒนาเว็บ

Phase 5 : พัฒนาและดำเนินการ (Production & Operation)
11. ลงมือพัฒนาเว็บ
12. เปิดเว็บไซต์
13. ดูแลและพัฒนาต่อเนื่อง
สิ่งที่ได้รับ 
1. เว็บที่สมบูรณ์
2. เปิดตัวเว็บและทำให้เป็นที่รู้จัก
3. แนวทางการดูแลและพัฒนาต่อไป

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

         

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

1.สามารถชักนำสายตาผู้อ่านผู้อ่านให้ไปยังหน้าเพจที่เราต้องการได้

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

3.สีสามารถนำไปใช้แบ่งบริเวณต่างๆ

4.สีใช้ดึงดูความสนใจผู้อ่านได้

5.สีสามารถสร้างอารมณ์โดยรวมของเวปเพจได้

   สีขั้นที่ 1 (สีขั้นต้นหรือแม่สี Primary Color ) ประกอบด้วย สีแดง สีเหลือง และสีน้ำเงิน

   สีขั้นที่ 2 (Binary Color) เกิดจากการนำเอาสีขั้นที่ 1 มาผสมกันในอัตราส่วนเท่าๆ กัน ประกอบด้วย สีเขียว สีส้ม และสีม่วง

   สีเขียว เกิดจากการนำเอา สีเหลือง กับ สีน้ำเงิน มาผสมกันในอัตราส่วนเท่าๆ กัน

   สีส้ม เกิดจากการนำเอา สีเหลือง กับ สีแดง มาผสมกันในอัตราส่วนเท่าๆ กัน

   สีม่วง เกิดจากการนำเอา สีแดง กับ สีน้ำเงิน มาผสมกันในอัตราส่วนเท่าๆ กัน

   สีขั้นที่ 3 (Intermediate Color) เกิด จากการนำเอาสีขั้นที่ 2 ผสมกับสีขั้นต้นที่อยู่ใกล้เคียงกันได้สีต่างกันออกไป ได้แก่ สี      เหลืองแกมเขียว สีน้ำเงินแกมม่วง สีแดงแกมม่วง สีแดงแกมส้ม สีเหลืองแกมส้ม และสีน้ำเงินแกมเขียว

   สีเหลืองแกมเขียว เกิดจากการผสมกันระหว่าง สีเหลืองกับ สีเขียว อย่างละเท่าๆ กัน

   สีน้ำเงินแกมม่วง เกิดจากการผสมกันระหว่าง สีน้ำเงิน กับ สีม่วง อย่างละเท่าๆ กัน

   สีแดงแกมม่วง เกิดจากการผสมกันระหว่าง สีแดง กับ สีม่วง อย่างละเท่าๆ กัน

   สีแดงแกมส้ม เกิดจากการผสมกันระหว่าง สีแดง กับ สีส้ม อย่างละเท่าๆ กัน

   สีเหลืองแกมส้ม เกิดจากการผสมกันระหว่าง สีเหลือง กับ สีส้ม อย่างละเท่าๆ กัน

   สีน้ำเงินแกมเขียว เกิดจากการผสมกันระหว่าง สีน้ำเงิน กับ สีเขียว อย่างละเท่าๆ กัน

ออกแบบกราฟฟิกสำหรับเว็บไซต์

รูปแบบกราฟฟิกสำหรับเว็บ(GIF,JPG และ PNG)

GIF ย่อมาจาก Graphics Interchange Format

 -ได้รับความนิยมในยุคแรก

 -มีระบบสีแบบ Index ซึ่งมีข้อมูลสีขนาด 8 บิต ทำให้มีสีมากที่สุด 256 สี

 -มีการบีบอัดข้อมูลตามแนวของพิกเซล เหมาสำหรับกราฟฟิกที่ประกอบด้วยสีพื้น

JPG ย่อมาจาก Joint Photographic Experts Group

 -มีข้อมูลสีขนาด 24 บิต(True Color) สามารถแสดงสีได้ถึง 16.7ล้านสี

 -ใช้ระบบการบีบอัดที่มีลักษณะที่สูญเสีย(lossy)

 -ไฟล์ประเภทนี้ควรนำไปใช้กับรูปถ่ายหรือกราฟฟิกที่มีการไล่ระดับสีอย่างละเอียด

PNG ย่อมาจาก Portable Network Graphic

 -สามารถสนับสนุนระบบสีได้ทั้ง 8 บิต 16 บิต 24บิต

 -มีระบบการบีบอัดแบบ Deflate ที่ไม่ทำให้เกิดการสูญเสีย(lossless)

 -มีระบบการควบคุมค่าแกมม่า(Gamma) และ ความโปร่งใส(Transparency)ในตัวเอง



↑ Back to Menu