5250110163_Bee: LECTURE

กระบวนการพัฒนาเว็บไซต์ 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)

กราฟฟิกมี 3 รูปแบบ คือ
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