บทที่ 2 กระบวนการพัฒนาเว็บไซต์
Phase 1
: สำรวจปัจจัยสำคัญ
1. รู้จักตัวเอง
2. เรียนรู้ผู้ใช้
3. ศึกษาคู่แข่ง
สิ่งที่ได้รับ
1. เป้าหมายหลักของเว็บ
2. ความต้องการของผู้ใช้
3. กลยุทธ์ในการแข่งขัน
Phase 2
: พัฒนาเนื้อหา
4. สร้างกลยุทธ์การออกแบบ
5. หาข้อสรุปขอบเขตเนื้อหา
สิ่งที่ได้รับ
1. แนวทางการออกแบบเว็บ
2. ขอบเขตเนื้อหาและการใช้งาน
3. ข้อมูลที่ถูกจัดอย่างเป็นระบบ
Phase 3
: พัฒนาโครงสร้างเว็บไซต์
6. จัดระบบข้อมูล
7. จัดทำโครงสร้างข้อมูล
8. พัฒนาระบบเนวิเกชัน
สิ่งที่ได้รับ
1. แนวทางการออกแบบเว็บ
2. ขอบเขตเนื้อหาและการใช้งาน
3. ข้อมูลที่ถูกจัดอย่างเป็นระบบ
phase 4
: ออกแบบและพัฒนาหน้าเว็บ
9. ออกแบบลักษณะหน้าตาเว็บ
10. พัฒนาเว็บต้นแบบและข้อกำหนดสุดท้าย
สิ่งที่ได้รับ
1. ลักษณะหน้าตาของเว็บ
2. เว็บต้นแบบที่จะใช้ในการพัฒนา
3. รูปแบบโครงสร้างของเว็บ
4. ข้อกำหนดในการพัฒนาเว็บ
phase 5
: พัฒนาและดำเนินการ
11. ลงมือพัฒนาเว็บ
12. เปิดเว็บไซต์
13. ดูแลและพัฒนาต่อเนื่อง
สิ่งที่ได้รับ
1. เว็บที่สมบูรณ์
2. เปิดตัวเว็บและทำให้เป็นที่รู้จัก
3. แนวทางการดูแลและพัฒนาต่อไป
บทที่ 6 การออกแบบหน้าเว็บ
แนวคิดในการออกแบบหน้าเว็บ
- เรียนรู้จากเว็บไซต์ต่างๆ
- ประยุกต์รูปแบบจากสิ่งพิมพ์
- ใช้แบบจำลองเปรียบเทียบ
- ออกแบบอย่างสร้างสรรค์
หลักการออกแบบหน้าเว็บ
หลักการออกแบบหน้าเว็บ
1. สร้างลำดับชั้นความสำคัญขององค์ประกอบ
2. สร้างรูปแบบ บุคลิกและสไตล์
3. สร้างความสม่ำเสมอทั่วทั้งไซต์
4. จัดวางองค์ประกอบที่สำคัญไว้ในส่วนบนของหน้าเสมอ
5. สร้างจุดเด่นด้วยความแตกต่าง
6. จัดแต่งหน้าเว็บให้เป็นระเบียบละเรียบง่าย
7. ใช้กราฟิกอย่างเหมาะสม
รูปแบบโครงสร้างหน้าเว็บ
รูปแบบโครงสร้างหน้าเว็บ
โครงสร้างหน้าเว็บที่พบเห็นบ่อยๆแบ่งเป็น 4 รูปแบบดังนี้
1. โครงสร้างหน้าเว็บในแนวตั้ง ถือเป็นรูปแบบพื้นฐานที่ได้รับความนิยมมากที่สุด
2. โครงสร้างหน้าเว็บในแนวนอนเป็นการใช้ประโยชน์ของพื้นที่ในแนวนอนอย่างเต็มที่
3. โครงสร้างหน้าเว็บที่พอดีกับหน้าจอใช้พื้นที่หน้าจอน้อยกว่าเว็บทั่วไปและมักจะจัดอยู่ตรงกึ่งกลาง
ไม่ซับซ้อนและสะดวกต่อการใช้งาน
4. โครงสร้างหน้าเว็บแบบสร้างสรรค์ เป็นเว็บของศิลปิน
นักออกแบบ บริษัทโฆษณา เนื่องจากเป็นเว็บที่สื่อถึงการแสดงฝีมือและความสามารถในการออกแบบอย่างสร้างสรรค์ได้เต็มที่
โครงสร้างหน้าเว็บที่ดีต้องมีความเหมาะสมกับปริมาณเนื้อหาและลักษณะของเว็บ สำหรับเว็บที่มีปริมาณเนื้อหามากควรใช้โครงสร้างหน้าเว็บในแนวตั้ง สำหรับเว็บที่มีปริมาณเนื้อหาไม่มากนัก
อาจเลือกรูปแบบโครงสร้างหน้าเว็บในแนวนอน
แบบพอดีกับหน้าจอหรือแบบสร้างสรรค์ได้ตามความเหมาะสม
ส่วนประกอบของหน้าเว็บ
ส่วนประกอบของหน้าเว็บ
1. ส่วนหัว (Page
Header) บริเวณมุมด้านซ้ายบนของหน้าเว็บเป็นส่วนที่มีความสำคัญมากเป็นพิเศษ
เป็นบริเวณที่ผู้ใช้จะเริ่มต้นให้ความสนใจ
2. ส่วนเนื้อหา (Page Body) เนื้อหาบนเว็บควรมีความกระทันรัดและจัดรูปแบบตัวอักษรอย่างเหมาะสม
3. ส่วนท้าย (Page Footer)จำเป็นต้องมีความสม่ำเสมอในทุๆหน้าเช่นเดียวกับส่วนหัว
บทที่ 9 ออกแบบกราฟฟิกสำหรับเว็บไซต์
กราฟฟิกเป็นองค์ประกอบที่สำคัญอยางหนึ่งของเว็บเพจ ช่วยสื่อความหมายสร้างความเข้าใจให้กับผู้ใช้ รวมทั้งช่วยสร้างความสวยงามให้เว็บไซต์น่าดูชมยิ่งขึ้น
ปัญหาที่มักเกิดขึ้นกับการสร้างกราฟฟิกคือ การเลือกใช้รูปแบบรากฟฟิกที่ไม่เหมาะสมกับลักษณะของรูป โดยไม่รู้จักความแตกต่างของรูปแบบกราฟฟิก ส่งผลให้รูปที่ได้มีลักษณะไม่สมบูรณ์และมีไฟล์ใหญ่เกินความจำเป็น
รูปแบบกราฟฟิกสำหรับเว็บ (GIF , JPG และ PNG)
GIF ย่อมาจาก Graphic
Interchange Format
- ได้รับความนิยมในยุคแรก
- มีระบบสีแบบ Index ซึ่งมีข้อมูลสีขนาด 8 บิต ทำให้มีสีมากสุด 256 สี
- มีการบีบอัดข้อมูลตามแนวของพิกเซล เหมาะสำหรับกราฟฟิกที่ประกอบด้วยสีพื้น
- มีระบบสีแบบ 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)ในตัวเอง
- มีระบบการบีบอัดแบบ Deflate ที่ไม่ทำให้เกิดการสูญเสีย (lossless)
- มีระบบการควบคุมค่าแกมม่า (Gamma) และความโปร่งใส(Transparency)ในตัวเอง
ระบบการวัดขนาดรูปภาพ
รูปภาพที่ใช้หน่วยวัดขนาดตามหน้าจอมอนิเตอร์
คือ หน่วยพิกเซล(Pixel) ซึ่งมีประโยชน์ในการเปรียบเทียบขนาดของกราฟฟิกกับองค์ประกอบอื่นๆในหน้าเว็บ
รวมถึงขนาดของหน้าต่างบราวเซอร์ด้วย
ระบบการวัดความละเอียดของรูปภาพ
ระบบความละเอียดของรูปภาพที่แสดงผลบนจอมอนิเตอร์ควรใช้หน่วย Pixel per inch(ppi) แต่ในทางการใช้งานจะนำหน่วย dot per inch(dpi) ซึ่งเป็นหน่วยวัดความละเอียดของสิ่งพิมพ์มาใช้แทนโดยความละเอียดของรูปภาพที่ใช้ควรมีความละเอียดแค่ 72 ppi ก็เพียงพอแล้ว
ระบบความละเอียดของรูปภาพที่แสดงผลบนจอมอนิเตอร์ควรใช้หน่วย Pixel per inch(ppi) แต่ในทางการใช้งานจะนำหน่วย dot per inch(dpi) ซึ่งเป็นหน่วยวัดความละเอียดของสิ่งพิมพ์มาใช้แทนโดยความละเอียดของรูปภาพที่ใช้ควรมีความละเอียดแค่ 72 ppi ก็เพียงพอแล้ว
ไม่มีความคิดเห็น:
แสดงความคิดเห็น