<<<เนื้อหาบทเรียน>>>
บทที่ 2
กระบวนการพัฒนาเว็บไซท์...Web Development Processes...
จัดระบบโครงสร้างข้อมูล(Information Architecture)
การจัดระบบโครงสร้างข้อมูลเป็นพื้นฐานในการออกแบบเว็บไซท์ที่ดี ได้แก่
รูปแบบการนeเสนอ ระบบการทำงานแบบจำลอง ระบบเนวิเกชัน และอินเตอร์เฟสของเว็บ
ดังนั้น การจัดระบบโครงสร้างข้อมูลจึงเป็นสิ่งสำคัญที่เกี่ยวข้องอยู่ในกระบวนการออกแบบเว็บไซต์
การพิจารณาว่า เว็บควรจะมีข้อมูลและการทำงานใดบ้าง โดยเริ่มจากการกำหนดเป้าหมาย
กลุ่มผู้ใช้เป้าหมาย เนื้อหาและการใช้งานที่จำเป็นนำมาจัดกลุ่มให้เป็นระบบ
ซึ่งระบบโครงสร้างของข้อมูลแบ่งออกได้ 5 Phase ดังนี้
Phase 1 :สำรวจปัจจัยสำคัญ (Research)
Phase 2:พัฒนาเนื้อหา (Site Content)
Phase 3:พัฒนาโครงสร้างเว็บไซท์ (Site Structure)
Phase 4:ออกแบบ และพัฒนาหน้าเว็บ (Visual Design)
Phase 5:พัฒนาและดำเนินการ (Production & Operation)
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. ข้อมูลที่ถูกจัดอย่างเป็นระบบ
Phase 4:ออกแบบ และพัฒนาหน้าเว็บ (Visual Design)
9. ออกแบบลักษณะหน้าตาเว็บ
10. พัฒนาเว็บต้นแบบและข้อกำหนดสุดท้าย
• สิ่งที่ได้รับ
1. ลักษณะหน้าตาของเว็บ
2. เว็บต้นแบบที่จะใช้ในการพัฒนา
3. รูปแบบโครงสร้างของเว็บ
4. ข้อกำหนดในการพัฒนาเว็บ
Phase 5:พัฒนาและดำเนินการ (Production & Operation)
11. ลงมือพัฒนาเว็บ
12. เปิดเว็บไซท์
13. ดูแลและพัฒนาต่อเนื่อง
สิ่งที่ได้รับ
1. เว็บที่สมบูรณ์
2. เปิดตัวเว็บและทำให้เป็นที่รู้จัก
3. แนวทางการดูแลและพัฒนาต่อไป
บทที่ 9
ออบแบบกราฟฟิกสำหรับเวบไซต์[Designing Web Graphics]
กราฟฟิกเป็นองค์ประกอบที่สำคัญอย่างหนึ่งของเวบเพจ ช่วยสื่อความหมายสร้างความเข้าใจให้กับผู้ใช้ รวมทั้งช่วยสร้าง ความสวยงามให้เวบไซต์ยิ่งขึ้น
ปัญหาที่มักเกิดขึ้นกับการสร้างกราฟฟิกคือ การเลือกใช้รูปแบบกราฟฟิกที่ไม่เหมาะสมกับลักษณะของรูป โดยไม่รู้จักความแตกต่างของรูปแบบกราฟฟิกส่งผลให้รูปที่ได้มีลักษณะไม่สมบูรณ์และมีไฟล์ใหญ่เกินความจำเป็น
รูปแบบกราฟฟิกสำหรับเวบ
GIF ย่อมาจาก Graphic Interchange Format
-ได้รับความนิยมในยุคแรก
-มีข้อมูลขนาด๘บิต มีสีมากสุดถึง๒๕๖สี
-ไม่สูญเสียข้อมูลขณะบีบอัดข้อมูล
JPG ย่อมาจาก Joint Photographic Experts Group
-มีข้อมูลสีขนาด๒๔บิต แสดงสีได้ถึง๑๖.๗ล้านสี
-มีข้อมูลบางส่วนสูญเสียขณะบีบอัดข้อมูล
PNG ย่อมาจาก Portable Network Graphic
-สนับสนุนระบบสีได้ทั้ง๘บิต ๑๖บิต และ๒๔บิต
-มีระบบการบีบอัดแบบDeflateที่ไม่ทำให้เกิดการสูญเสีย
-มีระบบการควบคุมค่าแกมม่าและความโปร่งใสในตัวเอง
ระบบการวัดขนาดของรูปภาพ
-รูปภาพจะใช้หน่วยวัดขนาดตามหน้าจอมอนิเตอร์ นั่นก็คือ หน่วยพิกเซล
ระบบการวัดความละเอียดของรูปภาพ
-ควรจะใช้หน่วย pixel per inch (ppi) แต่ทางการใช้งานจะนำหน่วย dot per inch (dpi) ซึ่งเป็นหน่วยวัดความละเอียดของของสิ่งพิมพ์มาใช้งานแทนppiในเวบไซต์ควรมีความละเอียดแค่๗๒ ppiก็พอแล้ว
โปรแกรมการฟฟิกสำหรับเวบ
-Adobe PhotoShop
-Adobe ImageReady
-Firework
กราฟฟิกรูปแบบGIF
-มีนามสกุล.gif
-มีคุณสมบัติในการเคลื่อนไหว
-เป็นกราฟฟิกที่สามารถนำไปใช้กับเบราเซอร์ทุกชนิด
-เก็บข้อมูลสีได้สูงสุด๘บิต
กราฟฟิกรูปแบบJPEG
-มีนามสกุลเป็น.jpg หรือ .jpeg
-ไม่ยึดติดกับปฏิบัติการใดๆ
-ใช้ระบบสีขนาด๒๔บิต ใช้สีมากถึง ๑๖.๗ล้านสี
คำแนะนำในกระบวนการออกแบบกราฟฟิกสำหรับเวบ
-ออกแบบกราฟฟิกโดยใช้ชุดสีสำหรับเว็บ
-เลือกใช้รูปแบบกราฟฟิกที่เหมาะสม
-ตัดแบ่งกราฟฟิกออกเป็นส่วนย่อย
บทที่ 10
จัดรูปแบบตัวอักษรสำหรับเว็บไซต์
ส่วนประกอบของตัวอักษร
- descender : ส่วนล่างของตัวอักษรพิมพ์เล็กที่ต่ำกว่าเส้น baseline
- baseline : เส้นสมมติที่ตัวอักษรส่วนใหญ่ตั้งอยู่
- cap height : ความสูงจากเส้น baseline ไปถึงส่วนบนสุดของตัวอักษรพิมพ์ใหญ่
- x-height : ความสูงของตัวอักษร x ในแนวพิมพ์เล็ก ซึ่งมักใช้อ้างถึงความสูงของตัวอักษรที่ไม่รวม ascender และ descender
- point size : ระยะความสูงทั้งหมดวัดจากส่วนบนสุดถึงส่วนล่างสุดของตัวอักษร
- ค่าความสูง x-height จะมีผลต่อภาพรวมของตัวอักษรและความยากง่ายในการอ่าน
รูปแบบตัวอักษร แบ่งได้ 2 ประเภทใหญ่ๆ
- ตัวอัการที่มีขนาดสัมพันธ์กับรูปร่าง(Proportional Font) หรือ ตัวอักษรที่มีขนาดไม่คงที่
- ตัวอักษรแต่ละตัวมีพื้นที่ตามแนวนอนไม่เท่ากันขึ้นอย฿กับรูปร่างของตัวอักษรนั้น
- สิ่งพิมพ์ต่างๆที่ผลิตด้วยคอมพิวเตอร์ส่วนใหญ่จะถูกออกแบบโดยใตวอักษรแบบนี้ เพื่อให้ดูเหมาะสมและอ่านง่าย
2. ตัวอักษรที่มีขนาดคงที่ (Fixed-width Font)
- จะเป็นตัวอักษรที่มีพื้นที่ตามแนวนอนเท่ากันหมด ซึ่งเป็นรุปแบบที่เรียบง่ายและมีลักษณะคล้ายตัวพิมพ์ดีด
ตัวอักษรประเภท serif และ Sans-Serif
ตัวอักษรประเภท serif
- ตัวอักษรประเภทนี้จะมีลายเส้นเพิ่มขึ้นที่ส่วนปลาย(บางคนเรียกตัวอักษรมีฐาน)
- เช่น Times New Rooom,Garamond,Georgiaเป็นต้น
- ตัวอักษรประเภทนี้เหมาะที่จะในส่วนที่เป็นรายละเอียดเนื้อหา
- ไม่เหมาะกับการใช้เป็นตัวหนา
ตัวอักษรประเภทSans-Serif
- ไม่มีลวยเส้นตกแต่งติดอยุ่กับตัวอัดษร
- เช่น Arial, Verdana, Geneva เป็นต้น
- เหมาะที่จะใช้กับหัวข้อหรือตัวอักษรขนาดใหญ่
- ไม่เหมาะกับลักษณะเอียงเพราะจะทำให้รูปร่างเปลี่ยนไปมาก
ไม่มีความคิดเห็น:
แสดงความคิดเห็น