Lecture

บทที่ 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)