บทที่ 2 กระบวนการพัฒนาเว็บไซต์
การจัดระบบโครงสร้างข้อมูลเป็นพื้นฐานในการออกแบบเว็บไซท์ที่ดี ได้แก่รูปแบบการนำเสนอ ระบบการทำงานแบบจำลอง ระบบเนวิเกชัน และอินเตอร์เฟสของเว็บ ดังนั้น การจัดระบบโครงสร้างข้อมูลจึงเป็นสิ่งสำคัญที่เกี่ยวข้องอยู่ในกระบวนการออกแบบเว็บไซต์ การจัดระบบโครงสร้างข้อมูล คือการพิจารณาว่า เว็บควรจะมีข้อมูลและการทำงานใดบ้าง โดยเริ่มจากการกำหนดเป้าหมาย กลุ่มผู้ใช้เป้าหมาย เนื้อหาและการใช้งานที่จำเป็น นำมาจัดกลุ่มให้เป็นระบบ
Phase 1 : สำรวจปัจจัยสำคัญ(Research)
1. รู้จักตัวเอง-กำหนดเป้าหมายและสำรวจความพร้อม
2. เรียนรู้ผู้ใช้-ระบุกลุ่มผู้ใช้และศึกษาความต้องการ
3. ศึกษาคู่แข่ง-สำรวจการแข่งขันและการเรียนรู้คู่แข่ง
Phase 1 : สำรวจปัจจัยสำคัญ(Research)
1. รู้จักตัวเอง-กำหนดเป้าหมายและสำรวจความพร้อม
2. เรียนรู้ผู้ใช้-ระบุกลุ่มผู้ใช้และศึกษาความต้องการ
3. ศึกษาคู่แข่ง-สำรวจการแข่งขันและการเรียนรู้คู่แข่ง
4. สร้างกลยุทธ์การออกแบบ
5. หาข้อสรุปขอบเขตเนื้อหา
Phase 3 :พัฒนาโครงสร้างเว็บไซท์(Site Structure)
6. จัดระบบข้อมูล
7. จัดทำโครงสร้างข้อมูล
8. พัฒนาระบบเนวิเกชัน
Phase 4 : ออกแบบและพัฒนาหน้าเว็บ(Visual Design)6. จัดระบบข้อมูล
7. จัดทำโครงสร้างข้อมูล
8. พัฒนาระบบเนวิเกชัน
9. ออกแบบลักษณะหน้าตาเว็บ
10. พัฒนาเว็บต้นแบบและข้อกำหนดสุดท้าย
Phase 5 : พัฒนาและดำเนินการ (Production & Operation)
11. ลงมือพัฒนาเว็บ
12. เปิดเว็บไซท์
12. เปิดเว็บไซท์
13. ดูแลและพัฒนาต่อเนื่อง
บทที่ 7 การออกแบบเว็บไซต์ให้เหมาะสมกับสิ่งแวดล้อม
ผู้ใชแต่ละคนมีสภาวะแวดล้อมทางเทคนิคแตกต่างกันไป ตัั้งแต่ระบบปฎิบัติการของคอมพิวเตอร์ เบราเซอร์ที่ใช้ ความละเอียดของหน้าจอ และอื่นๆอีกมากมาย
ปัจจัยหลักที่เกี่ยวข้องกับการท่องเว็บไซต์
- เบราเซอร์ที่ใช้ คือ โปรแกรมที่ใช้เรียกดูเว็บเพจโดยสามารถแสดงผลได้ทั้งรูปแบบตัวอักษร, รูปภาพ และภาพเคลื่อนไหว มีเบราเซอร์หลายชนิดที่ได้รับความนิยม เช่น
- Internet Explorer
- Netscape Navigator
- The World
- Opera
- Mozilla
- Firefox
ในอดีตมีการแข่งขันของเว็บเบราเซอร์สูง แต่ละผู้ผลิตต่างพัฒนาคุณสมบัติใหม่ๆให้กับเบราเซอร์ของตัวเอง แต่ในปัจจุบันคนส่วนใหญ่นิยมใช้งาน IE ทำให้ผู้พัฒนาเว็บมีความสะดวกขึ้นแต่ก็ยังพบปัญหาทีเกิดขึ้นระหว่าง version ของ IE ที่สนับสนุนคุณสมบัติแตกต่างกัน
2.ระบบปฎิบัติการ (Operating System) เป็นปัจจัยที่มีผลต่อการทำงานของเบราเซอร์มาก โดยแต่ละระบบปฎิบัติการจะมความแตกต่างกันในเรื่องของชนิดและรุ่นของเบราเซอร์ที่ใช้ได้, ระดับความละเอียดของหน้าจอ,ชุดสีของระบบและชนิดของตัวอักษรที่มาพร้อมกับระบบ เป็นต้น
3.ความละเอียดของหน้าจอ
- ขนาดของจอมอนิเตอร์มีหลายขนาด เช่น 15",17",21"และอื่นๆ
- ความละเอียดของหน้าจอ มีหน่วยเป็น Pixel
- ความละเอียดของหน้าจอไม่ขึ้นอยู่กับขนาดของมอนิเตอร์ที่ใช้ แต่จะขึ้นอยู่กับประสิทธิภาพของการ์ดแสดงว่าสามารถทำได้ละเอียดแค่ไหน
4.จำนวนสีที่จอของผู้ใช้สามารถแสดงได้
- มอนิเตอร์ที่สามารถแสดงสีที่แตกต่างกัน ขึ้นอยู่กับประสิทธิภาพของการ์ดจอ
- จำนวนหน่วยความจำการ์ดจอ ที่มากขึ้นจะทำให้สามารถแสดงสีได้มากขึ้น
- จำนวนสีที่การ์ดจอสามารถแสดงได้นั้น ขึ้นอยู่กับค่าความละเอียดของสีที่เรียกว่า bit depth หรือ color depth ซึ่งก็คือจำนวนบิตที่ใช้ในการเก็บข้อมูลแต่ละพิกเซล
- ชุดสีสำหรับเว็บ หมายถึง ชุดสีจำนวน 216 สีที่มีอยู่เหมือนกันในระบปฎิบัติการ Windows และMac
5.ชนิดของตัวอักษรที่มีอยู่ในเครื่องของผู้ใช้
- เบราเซอร์จะแสดงฟอนต์ที่กำหนดไว้ในเว็บเพจได้ก็ต่อเมื่อ คอมพิวเตอร์เครื่องนั้นมีฟอนต์เหล่านั้นติดตั้งอยู่ในเครื่อง
- MS Sans Serif VS Microsoft Sans Serif
- ตัวอักษรแบบกราฟิก (Graphic Text)
6.ความเร็วในการเชื่อมต่ออินเตอร์เน็ต
- ความเร็วของอินเตอร์เน็ตจะมีผลต่อเวลาที่ใช้ในการแสดงผลของเว็บ
- ความเร็วของอินเตอร์เน็ตมีหลายระดับ
- ในฐานะผู้ออกแบบเว็บไซต์จึงเป็นเรื่องที่ท้าท้ายที่จะต้องออกแบบเว็บให้สวยงาม น่าสนใจ และดาวน์โหลดได้เร็ว โดยทำให้ไฟล์มีขนาดเล็กที่สุด
7.ขนาดหน้าต่างเบราเซอร์
- ขนาดหน้าต่างของเบราเซอร์มีโอกาสที่ถูกปรับเปลี่ยนเป็นขนาดเท่าไหร่ก็ได้ตามความประสงค์ของผู้ใช้
- ออกแบบเว็บเพจให้เปลี่ยนแปลงขนาดได้ เมื่อมีการเปลี่ยนแปลงขนาดหน้าต่างเบราเซอร์ องค์ประกอบทั้งหมดมีกรจัดเรียงตัวกันใหม่ ตามขนาดพื้นที่ใหม่
- ออกแบบเว็บเพจให้มีขนาดคงที่(Fixed Design) รูปแบบนี้เหมาะกับผู้ที่ต้องการควบคุมโครงสร้างของหน้าเว็บให้คงที่เสมอ
8. ความสว่างและค่าความแตกต่างของโทนสี
- นอกเหนือจากค่าแกมม่าที่มีผลต่อความสว่างขอหน้าจอแล้ว ตัวผู้ใช้เองยังสามารถปรับระดับความสว่าง (Brightness) และความแตกต่างของโทนสี (Contrast) จากมอนิเตอร์ได้
- ผู้ออกแบบเว็บเพจต้องระวังไม่ให้หน้าเว็บมีโทนสีมืดหรือสว่างจนเกินไป และควรเลือกใช้โทนสีที่ต่างกันพอสมควร
บทที่ 9 ออกแบบกราฟฟิกสำหรับเว็บไซต์
กราฟฟิกเป็นองค์ประกอบทีสำคัญอย่างหนึ่งของเว็บเพจ ช่วยสื่อความหมายสร้างความเข้าใจให้กับผู้ใช้ รวมทั้งช่วยสร้างความสวยงามใหเว็บไซต์น่าดูชมยิ่งขึ้น
รูปแบบกราฟฟิกสำหรับเว็บ(GIF,JPGและ PNG)
- GIF ย่อมาจาก Graphic Interchange Format ได้รับความนิยมในยุคแรก มีระบบสีบบ Index ซึ่งมีข้อมูลขนาด 8 บิต ทำให้มีสีมากสุด 256 สี และมีการบีบอัดข้อมูลตามแนวของพิกเซล เหมาะสำหรับกราฟฟิกที่ประกอบด้วยสีพื้น
- JPG ย่อมาจาก Join Photographic Experts Group มีข้อมูลสีขนาด 24 บิต สามารถแสดงสีได้ถึง 16.7 ล้านสี ใช้ระบบการบีบอัดที่มีลักษณะที่สูญเสีย ไฟล์ประเภทนี้ควรนำไปใช้กับรูปถ่ายหรือกราฟฟิกที่มีการไล่รับสีอย่างละเอียด
- PNG ย่อมาจาก Portable Network Graphic สามารถสนับสนุนระบบสีได้ทั้ง 8 บิต 16 บิตและ 24 บิต มีระบบบีบอัดแบบ Deflate มีระบบการควบคุมค่าแกมม่า และโปร่งใส ในตัวเอง
ระบบการวัดขนาดรูปภาพ
- รูปภาพใช้หน่วยวัดขนาดตามหน้าจอมอนิเตอร์ นั่นคือหน่วยพิกเซล
- ระบบความละเอียดของรูปภาพที่แสดงผลบนจอมอนิเตอร์ใช้หน่วย pixel per inch (ppi)
- แต่ในทางการใช้งานจะนำหน่วย dot per inch (dpi) ซึ่งเป็นหน่วยวัดความละเอียดของสิ่งพิมพ์มาใช้งานแทน ppi
- ความละเอียดของรูปภาพทีใช้ในเว็บไซต์ควรมีความละเอียดแค่ 72 ppi ก็เพียงพอแล้ว
โปรแกรมกราฟฟิกสำหรับเว็บ
- ปัจจุบันมีโปรแกรมหลายประเภทที่นำมาใช้ในการสร้างกราฟฟิกสำหรับเว็บ
- Adobe OhotoShop
- Adobe ImangeReady
- Firework
- ค่าพื้นฐานที่สามารถเลือกปรับได้คือ รูปแบบไฟล์ , ชุดสีที่ใช้ ,จำนวนสี, ระดับความสูญเสีย,ความโปร่งใสและสีพื้นหลัง
รูปแบบกราฟฟิกสำหรับเว็บ
- Adobe PhotoShop เป็นโปรแกรมที่ได้รับความนิยมตั้แต่อดีตจนถึงปัจจุบัน
- Adobe ImageReady ลักษณะหน้าตาและเครื่องมือจะคล้ายคลึงกับ PhotoShop แต่จะถูกพัฒนาขึ้นเพื่อใช้งานกราฟฟิกโดยเฉพาะ และสามารถเพิ่ม Animation ได้
- Macromedia Fireworks มีคุณสมบัติในการตกแต่งตัวอักษรกราฟฟิกที่เห็นผลทันที การแสดงค่าของสีในระบบเลขฐานสิบหก การสร้างภาพเคลื่อนไหว และการตัดแบ่งภาพให้มีขนาดเล็กๆสำหรับไฟล์ HTML
กราฟฟิกรูปแบบ GIF
- มีไฟล์นามสกุลเป็น .gif
- ลักษณะเด่นของ GIF คือ การไม่ขึ้นกับระบบปฎิบัติการใดๆ
- GIFเป็นกราฟฟิกประเภทเดียวที่สามารถนำไปใช้กับเบราเซอร์ทุกชนิดโดยไม่ต้องคำนึงถึงเวอร์ชันใด
- GIF มีคุณสมบัติในการเคลื่อนไหว
- GIF มีระบบสีแบบ Index เก็บข้อมูลสีได้สูงสุด 8 bit
- คุณสมบัติ Interlacing คือ การบันทึกไฟล์ GIF เป็น 4 ระดับคือ ที่คุณภาพ 12.5%,25%,50%และ100%
- คุณสมบัติในการเคลื่อนไหว
- จำกัดขนาดของกราฟฟิกได้
กราฟฟิกรูปแบบ JPEG
- มีนามสกุลเปน .jpgหรือ .jpeg
- ใช้วิธีการบีบอัดข้อมูลแบบ JFIF
- ไฟล์ประเภท JPEGไม่ยึดติดกับระบบปฎิบัติการใดๆและสามารถใช้ได้กับเบราเซอร์ทั้ง Netscape และ IE version 2 เป็นต้นไป
- ใช้ระบบสีขนาด 24 บิต ซึ่งจะใช้สีสมจริงมากถึง 16.7 ล้านสี ส่งผลให้ได้รูปที่มีคุณภาพสูง
- ระบบการบีบอัดข้อมูลในไฟล์ JPEG เป็นการบีบอัดข้อมูลแบบ lossy คือสูญเสียรายละเอียดบางส่วนของภาพไป โดย JPEG สามารถบีบอัดข้อมูลในอัตราสูงตั้งแต่ 10:1 จนถึง 20:1 โดยที่สายตามนุษย์ไม่อาจมองเห็นคุณภาพที่ลดลงแต่อย่างใด
- การขยายข้อมูลของ JPEG จะต้องทำการขยายข้อมูลก่อนการแสดงผล
- การลดขนาดไฟล์ JPEG ไม่สามารถลดขนาดไฟล์โดยการลดจำนวนบิตของสีลงได้
คำแนะนำในกระบวนการออกแบกราฟฟิกสำหรับเว็บ
- ออกแบบกราฟฟิกโดยใช้ชุดสีดำสำหรับเว็บ (Web Palette)
- เลือกใช้รูปแบบกราฟฟิกที่เหมาะสม GIF หรือ JPEG
- ตัดแบ่งกราฟฟิกออกเป็นส่วนย่อย (Slices)
