บทที่ 1 ศัพท์เทคนิค
Web Page คือ
เอกสารที่เราเปิดดูใน Web ส่วนใหญ่สร้างจากภาษา HTML
Web Site คือ
ชื่อเครื่องคอมพิวเตอร์ที่เก็บเว็บเพจ เมื่อเราต้องการดูข้อมูลเว็บเพจ
เราต้องใช้โปรแกรมเบราเซอร์เป็นเครื่องมือ
Home Page คือ แต่ละเว็บไซต์ จะประกอบด้วยเว็บเพจหลายหน้า
แต่ต้องมีการกำหนดไว้ว่า จะไห้หน้าใดเป็นหน้าแรก เว็บเพจ ที่เป็นหน้าแรกนี้ เรียกว่า
"Home Page"
Link คือ
เป็นคุณสมบัติที่ทำไห้เว็บเพจมีความแตกต่างจากเอกสารทั่วไป
และเป็นปัจจัยหนึ่งที่ทำไห้www ประสบความสำเร็จ
Web Browser คือ โปรแกรมที่เป็นประตูสู่wwwในปัจจุบันมีไห้เลือกหลายตัว
เช่น InternetExplorer Safari FireFoxเป็นต้น
URL คือ ตำแหน่งเฉพาะเจาะจงที่เราต้องระบุ
เมื่อเราต้องการเรียกดูข้อมูล เรียกตำแหน่งนั้นว่า URL
กระบวนการพัฒนาเว็บไซต์
การจัดระบบโครงสร้างข้อมูล คือการพิจารณาว่า
เว็บควรจะมีข้อมูลและการทำงานใดบ้าง โดยเริ่มจากการกำหนดเป้าหมาย
กลุ่มผู้ใช้เป้าหมาย เนื้อหาและการใช้งานที่จำเป็น
นำมาจัดกลุ่มให้เป็นระบบเป็นพื้นฐานในการออกแบบเว็บไซต์ที่ดี มีทั้งหมด 5
Phase
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. ข้อมูลที่ถูกจัดอย่างเป็นระบบ 7
Phase 4 : ออกแบบและพัฒนาหน้าเว็บ
(Visual Design)
9. ออกแบบลักษณะหน้าตาเว็บ
10. พัฒนาเว็บต้นแบบและข้อกำหนดสุดท้าย
สิ่งที่ได้รับ
1. ลักษณะหน้าตาของเว็บ
2. เว็บต้นแบบที่จะใช้ในการพัฒนา
3. รูปแบบโครงสร้างของเว็บ
4. ข้อกำหนดในการพัฒนาเว็บ
Phase 5 : พัฒนาและดำเนินการ
(Production & Operation)
11. ลงมือพัฒนาเว็บ
12. เปิดเว็บไซต์
13. ดูแลและพัฒนาต่อเนื่อง
สิ่งที่ได้รับ
1. เว็บที่สมบูรณ์
2. เปิดตัวเว็บและทำให้เป็นที่รู้จัก
3. แนวทางการดูแลและพัฒนาต่อไป
บทที่ 3
การออกแบบเพื่อผู้ใช้
กำหนดกลุ่มผู้ใช้เป้าหมาย
การทำเว็บไซต์จำเป็นต้องรู้กลุ่มผู้ใช้เป้าหมายที่จะเข้ามาใช้บริการในเว็บไซต์อย่างชัดเจน
เพื่อที่จะตอบสนองความต้องการของผู้ใช้ได้อย่างถูกต้อง
สิ่งที่ผู้ใช้ต้องการจากเว็บไซต์
1. ข้อมูลและการใช้งานที่เป็นประโยชน์
2. การตอบสนองต่อผ
3. ความบันเทิ
4. ของฟรี
ข้อมูลหลักที่ควรมีอยู่ในเว็บไซต์
1. ข้อมูลเกี่ยวกับบริษัท (About the
company)
2. รายละเอียดผลิตภัณฑ์ (Product
information)
3. ข่าวความคืบหน้าและข่าวจากสื่อมวลชน (News/Press
releases)
4. คำถามยอดนิยม (Frequently asked
questions)
5. ข้อมูลในการติดต่อ (Contact
information)
บทที่ 9 การออกแบบกราฟฟิกสำหรับเว็บไซต์
รูปแบบกราฟฟิกสำหรับเว็บ
(GIF , JPG และ PNG)
GIF ย่อมาจาก Graphic Interchange
Format
- ได้รับความนิยมในยุคแรก
- มีระบบสีแบบ
Index ซึ่งมีข้อมูลสีขนาด 8
บิต ทำให้มีสีมากกว่า 256 สี
- มีการบีบอัดข้อมูลตามแนวนอนของพิกเซล เหมาะสำหรับกราฟฟิกที่ประกอบด้วยสีพื้น
JPG ย่อมาจาก Joint
Photogtaphic Experts Group
- มีข้อมูลสีขนาด
24 บิต (True Color) สามารถแสดงสีได้ถึง 16.7
ล้านสี
- ใช้ระบบการบีบอัดที่มีลักษณะที่สูญเสีย
(lossy)
- ไฟล์ประเภทนี้ควรนำไปใช้กับรูปถ่ายหรือกราฟฟิกที่มีการไล่ระดับสีอย่างละเอียด
PNG ย่อมาจาก Portable Network
Graphic สามารถสนับสนุนระบบสีได้ทั้ง
8บิต 16 บิต และ 24
บิต มีระบบการบีบอัดแบบ Deflate ที่ไม่ทำให้เกิดการสูญเสีย
(lossless) มีระบบการควบคุมค่าแกมม่า (Gamma) และความโปร่งใส (Transparency)ในตัวเอง
ระบบการวัดขนาดของรูปภาพ
รูปภาพที่ใช้หน่วยวัดขนาดตามหน้าจอมอนิเตอร์ นั่นก็คือหน่วยพิกเซล
ซึ่งจะมีประโยชน์ในการเปรียบเทียบขนาดของกราฟฟิกหับองค์ประกอบอื่น ๆ ในหน้าเว็บ รวมถึงขนาดของหน้าต่างเบราเซอร์ด้วย
ระบบการวัดความละเอียดของรูปภาพ
ระบบความละเอียดของรูปภาพที่แสดงผลบนจอมอนิเตอร์ควรใช้หน่วย
pixel per inch (ppi)
แต่ในทางการใช้งานจะนำหน่วย
dot per inch (dpi) ซึ่งเป็นหน่วยวัดความละเอียดของสิ่งพิมพ์มาใช้งานแทน
ppi
ความละเอียดของรูปภาพที่ใช้ในเว็บไซต์ควรมีความละเอียดแค่
72 ppi ก็เพียงพอแล้ว
โปรแกรมกราฟฟิกสำหรับเว็บ
ปัจจุบันมีโปรแกรมหลายประเภททีนำมาใช้ในการสร้างกราฟฟิกสำหรับเว็บ
- Adobe PhotoShop
- Adobe ImangeReady
-
Firework
* ค่าพื้นฐานที่สามารถเลือกปรับได้คือ รูปแบบไฟล์, ชุดสีที่ใช้ , จำนวนสี, ระดัความสูญเสีย, ความโปร่งใส และสีพื้นหลัง
คำแนะนำในกระบวนการออกแบบกราฟฟิกสำหรับเว็บ
* ออกแบบกราฟฟิกโดยใช้ชุดสีสำหรับเว็บ
(Web Palette)
* เลือกใช้รูปแบบกราฟฟิกที่เหมาะสม
GIF หรือ JPEG
* ตัดแบ่งกราฟฟิกออกเป็นส่วนย่อย
(Slices)
ไม่มีความคิดเห็น:
แสดงความคิดเห็น