กระบวนการพัฒนาเว็บไซต์ Web Development Processes
จัดระบบโครงสร้างข้อมูล (Information Architecture)
การจัดระบบโครงสร้างข้อมูลเป็นพื้นฐานในการออกแบบเว็บไซท์ที่ดี ได้แก่ รูปแบบการนำเสนอ ระบบการทำงานแบบจำลอง ระบบเนวิเกชัน และอินเตอร์เฟสของเว็บ ดังนั้น การจัดระบบโครงสร้างข้อมูลจึงเป็นสิ่งสำคัญที่เกี่ยวข้องอยู่ในกระบวนการออกแบบเว็บไซต์ การพิจารณาว่า เว็บควรจะมีข้อมูลและการทำงานใดบ้าง โดยเริ่มจากการกำหนดเป้าหมาย กลุ่มผู้ใช้เป้าหมาย เนื้อหาและการใช้งานที่จำเป็น นำมาจัดกลุ่มให้เป็นระบบ ซึ่งระบบโครงสร้างของข้อมูลแบ่งออกได้ 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. แนวทางการดูแลและพัฒนาต่อไป
ออกแบบกราฟฟิกสำหรับสำหรับเว็บไซต์(Designing Web Graphics)
1. GIF ( Graphic Interchange Format )
- ได้รับความนิยมในยุดแรก
- มีข้อมูลสีขนาด 8 บิต ทำให้มีสีมากสุด 256 สี
- การบีบอัดข้อมูลตามแนวของพิกเซล เหมาะสำหรับกราฟฟิกที่ประกอบด้วย สีพื้น
2. JPG ( Joint Photographic Experts Group )
- มีข้อมูลสีขนาด 24 บิต แสดงสีได้ถึง 16.7 ล้านสี
- ใช้ระบบการบีบอัดที่มีลักษณะที่สูญเสีย(lossy)
- ควรนำไปใช้กับรูปถ่ายหรือกราฟฟิกที่มีการไล่ระดับสีอย่างละเอียด
3. PNG ( Portable Network Graphic )
- สามารถสนับสนุนสีได้ทั้ง 8 บิต 16 บิต และ 24 บิต
- การบีบอัดแบบ Deflate ที่ไม่ทำให้เกิดการสูญเสีย(lossless)
- ควบคุมแกมม่า (Gamma) และความโปร่งใส(Transparency) ในตัวเอง
ระบบการวัดขนาดของรูปภาพ
-ใช้หน่วยวัดเป็น พิกเซล-ความละเอียดของภาพควรใช้ หน่วย pixle per inch (ppi)
-การใช้งานจะนำหน่วย dot per inch (dpi) จะเหมาะสมกับเครื่องพริ้นท์
-ควรมีความละเอียดแค่ 72 ppt
กราฟฟิกรูปแบบ GIF
- ไม่ขึ้นอยู่กับระบบปฏิบัติการใด ๆ- สามารถนำไปใช้กับเบราเซอร์ทุกชนิดได้โดยไม่ต้องคำนึงถึงเวอร์ชันใด ๆ
- เก็บข้อมูลสี ได้สูงสุด 8 บิต
คุณสมบัติ Interlacing
ข้อดี คือ ผู้ใช้เห็นภาพที่กำลังดาวน์โหลดอยู่มีความชัดเจนขึ้นเรื่อย ๆ ข้อเสีย คือ ขนาดไฟล์จะเพิ่มขึ้นเล็กน้อย
- ระบบการบีบอัดข้อมูลของ GIF จะมีการบีบอัดข้อมูลแบบไม่สูญเสีย ใช้การบีบอัดที่เรียกว่า LZW ซึ่งเป็นแบบเดียวกับที่ใช้ในโปรแกรม zip
คุณสมบัติในการเคลื่อนไหว(Animated GIF)
ข้อดี คือ ไม่ต้องอาศัย plug-in
ข้อคิดในการใช้ Animated GIF
- ใช้ภาพเคลื่อนไหวในจุดที่ต้องการให้ผู้ชมสนใจมากที่สุด- ไม่ควรใช้ภาพเคลื่อนไหวมากเกินไป จะทำให้ผู้ใช้สับสน
- ทำให้ภาพเคลื่อนไหวนั้นโหลดได้เร็ว
- การลดขนาดไฟล์ GIF
-พยายามจำกัดขนาดของกราฟฟิก
-ใช้สีพื้น ๆ เข้าไว้
-รูปที่มีลวดลายตามแนวนอนจะมีขนาดไฟล์ที่เล็กกว่า
กราฟฟิกรูปแบบ JPEG
-ใช้วิธีการบีบบอัดข้อมูลแบบ JFIF (JPEG File interchange format)
-ใช้ระบบสีขนาด 24 บิต จะให้สีสมจริงมากถึง 16.7 ล้านสี ส่งผลให้ได้รูปที่มีคุณภาพ
-ระบบการบีบอัดข้อมูลในไฟล์ JPEG
-เป็นการบีบอัดแบบ lossy คือสูญเสียรายละเอียดบางส่วนของภาพไป
-ใช้วิธีเก็บข้อมูลความสัมพันธ์ของสีและความสว่างในรูปเหลี่ยม
-ประสิทธิภาพจะขึ้นอยู่กับการรวมกลุ่มของรายละเอียดในรูป
-การขยายข้อมูลของ JPEG จะใช้เวลาในการแสดงผลรูป JPEG มากกว่า GIF
-การลดขยายไฟล์ JPEG ไม่สามารถลดขนาดไฟล์โดยการลดจำนวนบิตของสีลงได้
การออกแบบเว็บไซต์ให้เหมาะสมกับสิ่งแวดล้อม
ปัจจัยหลักที่เกี่ยวข้องกับการท่องเว็บไซต์
1. เบราเซอร์ที่ใช้
- เบราเซอร์คือโปรแกรมที่ใช้เรียกดูเว็บเพจ โดยสามารถแสดงผลได้ทั้งรูปแบบตัวอักษร , รูปภาพ และภาพเคลื่อนไหว
- มีเบราเซอร์หลายชนิดที่ได้รับความนิยม เช่น
* Internet Explorer
* Netscape Navigator
* The World
* Opera
* Mozilla
* Firefox
- การออกแบบเว็บไซต์ตามคุณสมบัติของเบราเซอร์
* เว็บไซต์สำหรับเบราเซอร์ทุกร่น
* เว็บไซต์สำหรับเบราเซอร์รุ่นล่าสุด
* เว็บไซต์ตามความสามารถของเบราเซอร์
* เว็บไซต์ที่มีหลายรูปแบบ
2. ระบบปฏิบัติการ (Operating System)
- ระบบปฏิบัติการเป็นปัจจัยที่มีผลต่อการทำงานของเบราเซอร์มาก โดยแต่ละระบบปฏิบัติการจะมีความแตกต่างกันในเรื่องของชนิดและรุ่นของ เบราเซอร์ที่ใช้ได้ , ระดับความละเอียดของหน้าจอ , ชุดสีของระบบ และชนิดของตัวอักษรที่มาพร้อมกับระบบ เป็นต้น
* การแสดงผลของ windows จะมีขนาดใหญ่กว่า Mac เล็กน้อย
* ความสว่างของหน้าจอบน Mac จะมากกว่า Windows และ Unix
3. ความละเอียดของหน้าจอ
- ขนาดของจอมอนิเตอร์มีหลายขนาด เช่น 15",17",21" และอื่น ๆ
- ความละเอียดของหน้าจอ (monitor resolution) มีหน่วยเป็น Pixel
* ความละเอียด 640 x 480 หมายถึง หน้าจอมีจุดพิกเซลเรียงตัวตามแนวนอน 640 พิกเซล และตามแนวตั้ง 480 พิกเซล
- ความละเอียดของหน้าจอจะไม่ขึ้นกับบขนาดของมอนิเตอร์ที่ใช้ แต่จะขึ้นกับประสิทธิภาพของการ์ดแสดงผลว่าสามารถทำได้ละเอียดแค่ไหน
* EX: จอขนาด 17" สามารถตั้งค่าความละเอียดได้ตั้งแต่ 640 x 480 จนถึง 1600x1200 เป็นต้น
4. จำนวนสีที่จอของผู้ใช้สามารถแสดงได้
- มอนิเตอร์ที่สามารถแสดงสีที่แตกต่างกัน ขึ้นอยู่กับประสิทธิภาพของการ์ดจอ (video card)
- จำนวนหน่วยความจำในการ์ดจอ (video memory) ทีมากขึ้นจะทำให้สามารถแสดงสีได้มากขึ้น
- จำนวนสีที่การ์ดจอสามารถ แสดงได้นั้น ขึ้นอยู่กับค่าความละเอียดของสีที่เรียกว่า bit depth หรือ color depth ซึ่งก็คือจำนวนบิตที่ใช้ในการเก็บข้อมูลแต่ละพิกเซล
- ชุดสีสำหรับเว็บ (Web Palette) หมายถึงชุดสีจำนวน 216 สีที่มีอยู่เหมือนกันในระบบปฏิบัติการ Windows และ Mac - ปัจจุบัน Web Palette มีความสำคัญลดน้อยลง เนื่องจากจอของผู้ใช้สามารถแสดงสีได้มากขึ้น แต่ใน tool ต่าง ๆ เช่น Dreamweaver ก็ยังเห็นชุดสีเหล่านี้ปรากฏอยู่
5. ชนิดของตัวอักษรที่มีอยู่ในเครื่องของผู้ใช้
- MS Sans Serif VS Microsoft Sans Serif
* MS Sans Serif เป็นฟอนต์แบบบิตแมพ (bitmapped font ) ที่ออกแบบขึ้นจากจุดของพิกเซล โดยมีการออกแบบแต่ละตัวอักษรไว้เป็นขนาดที่แน่นอน
* Microsoft Sans font เป็นฟอนต์ที่มีโครงสร้างของอักขระเป็นแบบเวคเตอร์หรือลายเส้น (vector font) โดยมีการออกแบบเอาท์ไลน์ไว้เพียงแบบเดียว แต่สามารถปรับขนาดได้อย่างไม่จำกัด
- ตัวอักษรแบบกราฟิก (Graphic Text)
ข้อดี
* สามารถกำหนดลักษณะของตัวอักษรได้อย่างแน่นอน ทั้งชนิด ขนาด สี
*ผู้ชมทุกคนจะมองเห็นตัวอักษรได้เหมือนกัน โดยไม่จำเป็นต้องมีตัวอักษรชนิดนั้นติดตั้งไว้ใน เครื่อง
* สามารถสร้างเอกลักษณ์เฉพาะตัวของเว็บได้จากรูปแบบของตัวอักษร
ข้อเสีย
* ใช้เวลาในการ download มากกว่า
* ลำบากในการแก้ไขและเปลี่ยนแปลง
* ข้อความที่เป็นกราฟิกจะไม่สามารถค้นหาได้ด้วย search engine
- ความละเอียดของหน้าจอจะไม่ขึ้นกับบขนาดของมอนิเตอร์ที่ใช้ แต่จะขึ้นกับประสิทธิภาพของการ์ดแสดงผลว่าสามารถทำได้ละเอียดแค่ไหน
* EX: จอขนาด 17" สามารถตั้งค่าความละเอียดได้ตั้งแต่ 640 x 480 จนถึง 1600x1200 เป็นต้น
4. จำนวนสีที่จอของผู้ใช้สามารถแสดงได้
- มอนิเตอร์ที่สามารถแสดงสีที่แตกต่างกัน ขึ้นอยู่กับประสิทธิภาพของการ์ดจอ (video card)
- จำนวนหน่วยความจำในการ์ดจอ (video memory) ทีมากขึ้นจะทำให้สามารถแสดงสีได้มากขึ้น
- จำนวนสีที่การ์ดจอสามารถ แสดงได้นั้น ขึ้นอยู่กับค่าความละเอียดของสีที่เรียกว่า bit depth หรือ color depth ซึ่งก็คือจำนวนบิตที่ใช้ในการเก็บข้อมูลแต่ละพิกเซล
- ชุดสีสำหรับเว็บ (Web Palette) หมายถึงชุดสีจำนวน 216 สีที่มีอยู่เหมือนกันในระบบปฏิบัติการ Windows และ Mac - ปัจจุบัน Web Palette มีความสำคัญลดน้อยลง เนื่องจากจอของผู้ใช้สามารถแสดงสีได้มากขึ้น แต่ใน tool ต่าง ๆ เช่น Dreamweaver ก็ยังเห็นชุดสีเหล่านี้ปรากฏอยู่
5. ชนิดของตัวอักษรที่มีอยู่ในเครื่องของผู้ใช้
- MS Sans Serif VS Microsoft Sans Serif
* MS Sans Serif เป็นฟอนต์แบบบิตแมพ (bitmapped font ) ที่ออกแบบขึ้นจากจุดของพิกเซล โดยมีการออกแบบแต่ละตัวอักษรไว้เป็นขนาดที่แน่นอน
* Microsoft Sans font เป็นฟอนต์ที่มีโครงสร้างของอักขระเป็นแบบเวคเตอร์หรือลายเส้น (vector font) โดยมีการออกแบบเอาท์ไลน์ไว้เพียงแบบเดียว แต่สามารถปรับขนาดได้อย่างไม่จำกัด
- ตัวอักษรแบบกราฟิก (Graphic Text)
ข้อดี
* สามารถกำหนดลักษณะของตัวอักษรได้อย่างแน่นอน ทั้งชนิด ขนาด สี
*ผู้ชมทุกคนจะมองเห็นตัวอักษรได้เหมือนกัน โดยไม่จำเป็นต้องมีตัวอักษรชนิดนั้นติดตั้งไว้ใน เครื่อง
* สามารถสร้างเอกลักษณ์เฉพาะตัวของเว็บได้จากรูปแบบของตัวอักษร
ข้อเสีย
* ใช้เวลาในการ download มากกว่า
* ลำบากในการแก้ไขและเปลี่ยนแปลง
* ข้อความที่เป็นกราฟิกจะไม่สามารถค้นหาได้ด้วย search engine
