>>>>>Lesson of Lecture<<<<<
บทที่2 กระบวนการพัฒนาเว็บไซต์
1. จัดระบบโครงสร้างข้อมูล (Information Architecture)
• การจัดระบบโครงสร้างข้อมูล คือการพิจารณาว่า เว็บควรจะมีข้อมูลและการทำงานใดบ้าง โดยเริ่มจากการกำหนด เป้าหมาย กลุ่มผู้ใช้เป้าหมาย เนื้อหาและการใช้งานที่จำเป็น นำมาจัดกลุ่มให้เป็นระบบ
การจัดระบบโครงสร้าง
เป็นพื้นฐานการออกแบบเว็บไซต์ที่ดี ได้แก่ รูปแบบการนำเสนอ ระบบการทำงานแบบจำลอง ระบบเนวิเกชัน และอินเตอร์เฟสของเว็บดังนั้น การจัดระบบโครงสร้างข้อมูลจึงเป็นสิ่งสำคัญที่เกี่ยวข้องอยู่ในกระบวนการออกแบบเว็บไซต์
จัดระบบโครงสร้างข้อมูล(Information Architecture)
Phase 1 : สำรวจปัจจัยสำคัญ (Research)
1.รู้จักตัวเอง-กำหนดเป้าหมายและสำรวจความพร้อม
2.เรียนรู้ผู้ใช้-ระบุกลุ่มผู้ใช้และศึกษาความต้องการการ
3.ศึกษาคู่แข่ง-สำรวจการแข่งขันและการเรียนรู้คู่แข่ง
• สิ่งที่ได้รับ
1.เป้าหมายหลักของเว็บ
2.ความต้องการของผู้ใช้
3.กลยุทธ์ในการแข่งขัน
• การจัดระบบโครงสร้างข้อมูล คือการพิจารณาว่า เว็บควรจะมีข้อมูลและการทำงานใดบ้าง โดยเริ่มจากการกำหนด เป้าหมาย กลุ่มผู้ใช้เป้าหมาย เนื้อหาและการใช้งานที่จำเป็น นำมาจัดกลุ่มให้เป็นระบบ
การจัดระบบโครงสร้าง
เป็นพื้นฐานการออกแบบเว็บไซต์ที่ดี ได้แก่ รูปแบบการนำเสนอ ระบบการทำงานแบบจำลอง ระบบเนวิเกชัน และอินเตอร์เฟสของเว็บดังนั้น การจัดระบบโครงสร้างข้อมูลจึงเป็นสิ่งสำคัญที่เกี่ยวข้องอยู่ในกระบวนการออกแบบเว็บไซต์
จัดระบบโครงสร้างข้อมูล(Information Architecture)
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.เว็บต้นแบบที่ใช้ในการพัฒนา
Phase 5 : พัฒนาและดำเนินการ (Production & Operation)
11.ลงมือพัฒนาเว็บ
12.เปิดเว็บไซต์
13.ดูแลและพัฒนาต่อเนื่อง
• สิ่งที่ได้รับ
1.เว็บที่สมบูรณ์
2.เปิดตัวเว็บให้เป็นที่รู้จัก
3.แนวทางการดูแลและพัฒนาต่อไป
กราฟฟิกเป็นองค์ประกอบที่สำคัญอย่างหนึ่งของเวบเพจ ช่วยสื่อความหมายสร้างความเข้าใจให้กับผู้ใช้ รวมทั้งช่วยสร้าง ความสวยงามให้เวบไซต์ยิ่งขึ้น
ปัญหาที่มักเกิดขึ้นกับการสร้างกราฟฟิกคือ การเลือกใช้รูปแบบกราฟฟิกที่ไม่เหมาะสมกับลักษณะของรูป โดยไม่รู้จักความแตกต่างของรูปแบบกราฟฟิกส่งผลให้รูปที่ได้มีลักษณะไม่สมบูรณ์และมีไฟล์ใหญ่เกินความจำเป็น
รูปแบบกราฟฟิกสำหรับเวบ
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
-ไม่ยึดติดกับปฏิบัติการใดๆ
-ใช้ระบบสีขนาด๒๔บิต ใช้สีมากถึง ๑๖.๗ล้านสี
คำแนะนำในกระบวนการออกแบบกราฟฟิกสำหรับเวบ
-ออกแบบกราฟฟิกโดยใช้ชุดสีสำหรับเว็บ
-เลือกใช้รูปแบบกราฟฟิกที่เหมาะสม
-ตัดแบ่งกราฟฟิกออกเป็นส่วนย่อย
4.สร้างกลยุทธ์การออกแบบ
5.หาข้อสรุปขอบเขตเนื้อหา
• สิ่งที่ได้รับ
1.แนวทางการออกแบบเว็บ
2.ขอบเขตและเนื้อหาการใช้งาน
3.ข้อมูลที่ถูกจัดอย่างเป็นระบบ
Phase 3 : พัฒนาโครงสร้างเว็บไซท์(Site Structure)
6.จัดระบบข้อมูล
7.จัดทำโครงสร้างข้อมูล
8.พัฒนาระบบเนวิเกชัน
• สิ่งที่ได้รับ
1.แนวทางการออกแบบเว็บ
2.ขอบเขตและเนื้อหาการใช้งาน
3.ข้อมูลที่ถูกจัดอย่างเป็นระบบ
Phase 4 : ออกแบบและพัฒนาหน้าเว็บ(Visual Design)
9.ออกแบบลักษณะหน้าตาเว็บ
10.พัฒนาเว็บต้นแบบและข้อกำหนดสุดท้าย
• สิ่งที่ได้รับ
1.ลักษณะหน้าตาของเว็บ
2.เว็บต้นแบบที่ใช้ในการพัฒนา
Phase 5 : พัฒนาและดำเนินการ (Production & Operation)
11.ลงมือพัฒนาเว็บ
12.เปิดเว็บไซต์
13.ดูแลและพัฒนาต่อเนื่อง
• สิ่งที่ได้รับ
1.เว็บที่สมบูรณ์
2.เปิดตัวเว็บให้เป็นที่รู้จัก
3.แนวทางการดูแลและพัฒนาต่อไป
บทที่5 ออบแบบกราฟฟิกสำหรับเวบไซต์[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 เป็นต้น
- เหมาะที่จะใช้กับหัวข้อหรือตัวอักษรขนาดใหญ่
- ไม่เหมาะกับลักษณะเอียงเพราะจะทำให้รูปร่างเปลี่ยนไปมาก
ไม่มีความคิดเห็น:
แสดงความคิดเห็น