Lecture

กระบวนการพัฒนาเว็บไซท์

จัดระบบโครงสร้างข้อมูล

Phase1:สำรวจปัจจัยสำคัญ

1. รู้จักตัวเอง
2. เรียนรู้ผู้ใช้
3. ศึกษาคู่แข่ง

สิ่งที่ได้รับ
1. เป้าหมายหลักของเว็บ
2. ความต้องการของผู้ใช้
3. กลยุทธ์ในการแข่งขัน

Phase2: พัฒนาเนื้อหา

4. สร้างกลยุทธ์การออกแบบ
5. หาข้อสรุปขอบเขตเนื้อหา

สิ่งที่ได้รับ
1. แนวทางการออกแบบเว็บ
2. ขอบเขตเนื้อหาและการใช้งาน
3. ข้อมูลที่ถูกจัดอย่างเป็นระบบ

Phase3: พัฒนาโครงสร้างเว็บไซท์

6. จัดระบบข้อมูล
7. จัดทำโครงสร้างข้อมูล
8. พัฒนาระบบเนวิเกชัน

สิ่งที่ได้รับ
1. แนวทางการออกแบบเว็บ
2. ขอบเขตเนื้อหาและการใช้งาน
3. ข้อมูลที่ถูกจัดอย่างเป็นระบบ

Phase4: ออกแบบและพัฒนาหน้าเว็บ

9. ออกแบบลักษณะหน้าตาเว็บ
10. พัฒนาเว็บต้นแบบและข้อกำหนดสุดท้าย

สิ่งที่ได้รับ
1. ลักษณะหน้าตาของเว็บ
2. เว็บต้นแบบที่จะใช้ในการพัฒนา
3. รูปแบบโครงสร้างของเว็บ
4. ข้อกำหนดในการพัฒนา

Phase5: พัฒนาและดำเนินการ

11. ลงมือพัฒนาเว็บ
12. เปิดเว็บไซท์
13. ดูแลและพัฒนาต่อเนื่อง

สิ่งที่ได้รับ
1. เว็บที่สมบูรณ์
2. เปิดตัวเว็บและทำให้เว็บเป็นที่รู้จัก
3. แนวทางการดูแลและพัฒนาต่อไป


ออกแบบระบบเนวิเกชัน

ความสำคัญของระบบเนวิเกชัน
- ระบบเนวิเกชันอาจประกอบด้วยองค์ประกอบหลายอย่าง เช่น เนวิเกชันบาร์ หรือ pop-up menu ซึ่งอาจอยู่ในทุกหน้าของเว็บเพจ และอาจอยู่ในหน้าเฉพาะที่มีรูปแบบเป็นระบบสารบัญ ระบบดัชนี ที่สามารถให้ผู้ใช้คลิกผ่านโครงสร้างข้อมูลไปยังส่วนอื่นได้

- การออกแบบโครงสร้างข้อมูลที่ดีช่วยให้ผู้ใช้เข้าถึงข้อมูลได้ง่ายขึ้น ส่วนระบบเนวิเกชันเป็นส่วนเสริมในการสร้างสิ่งแวดล้อมที่สื่อความหมายเพื่อช่วยให้ผู้ใช้ท่องเว็บได้อย่างคล่องตัวโดยไม่หลงทาง โดยทำให้ผู้ใช้สามารถรู้ได้ว่าตัวเองกำลังอยู่ที่ไหน ได้ผ่านที่ใดมาบ้างและควรจะไปทางไหนต่อ

Navigation ที่ดีจะต้องสามารถตอบคำถามหรือบรรลุวัตถุประสงค์ต่อไปนี้
1. ผู้ชมกำลังอยู่ในส่วนใดของเว็บ
2. สามารถเข้าถึงข้อมูลที่ต้องการได้อย่างไร
3. สามารถกลับไปยังหน้าเว็บเดิมได้อย่างไร
4. หน้าเวบเพจใดที่ได้เยี่ยมชมข้อมูลแล้ว

รูปแบบของระบบเนวิเกชัน แบ่งออกเป็น 4 รูปแบบ

1. ระบบเนวิเกชันแบบลำดับชั้น ( Hierarchical )
          เป็นแบบพื้นฐานคือมีหน้าโฮมเพจหนึ่งหน้าและมีลิงค์ไปยังหน้าอื่นๆ ภายในเว็บถือเป็นแบบลำดับขั้นอย่างหนึ่งแล้ว แต่มีข้อจำกัดคือเคลื่อนที่ได้เฉพาะแนวตั้ง (บน-ล่าง)

2. ระบบเนวิเกชันแบบโกลบอล ( Global )
          หรือเรียกว่าแบบตลอดทั่วทั้งไซท์ เป็นระบบที่ช่วยเสริมข้อจำกัดของระบบเนวิเกชันแบบลำดับขั้น ทำให้สมารถเคลื่อนที่ได้ทั้งในแนวตั้งและแนวนอนอย่างมีประสิทธิภาพตลอดทั้งไซท์ ซึ่งอาจอยูาในรูปของเนวิเกชันบาร์ที่วางไว้ด้านบนหรือด้านล่างสุดของเว็บเพจทุกหน้าก็ได้ ผลการศึกษาตำแหน่องที่ดีที่สุดสำหรับเนวิเกชันบาร์คือด้านบนสุดหรือล่างสุดของหน้าเว็บ โดยปกติเนวิเกชันที่ด้านล่างของหน้ามักเป็นที่รวมลงค์ของข้อมูลเพิ่มเติมที่เกี่ยวกับเว็บ

3. ระบบเนวิเกชันแบบโลคอล ( Local )
          สำหรับเว็บที่มีความซับซ้อนมากอาจต้องใช้ระบบแบบโลคอลหรือแบบเฉพาะส่วนเข้ามาช่วยเมื่อมีบางส่วนที่ต้องการระบบเนวิเกชันที่มีลักษณะเฉพาะตัวเช่น หัวข้อย่อยของเนื้อหาที่อยู่ภายในส่วนหลักๆ ของเว็บเพื่อความสะดวกและสื่อความหมายให้ดีขึ้น

4. ระบบเนวิเกชันเฉพาะที่ ( Ad Hoc )
         เป็นแบบเฉพาะที่ตามความจำเป็นของเนื้อหาซึ่งก็คือลิงค์ของคำหรือข้อความที่หน้าสนใจซึ่งฝังอยู่ในประโยค ที่เชื่อมโยงไปยังรายละเอียดเกี่ยวกับคำนั้นๆ เพิ่มเติม เนวิเกชันรูปแบบนี้เป็นวิธีที่ดีในการนำเสนอจุดที่น่าสนใจได้อย่างไม่เด่นชัดจนเกินไป เพื่อให้ผู้สนใจคลิกเข้าไปหารายละเอียดเพิ่มเติมเองได้ขณะเดียวกันไม่รบกวนการอ่านของผู้ใช้ทั่วไปที่ไม่ต้องการข้อมูลอย่างละเอียด 
          ข้อเสียคือ ผู้อ่านมักมองข้ามลิงค์เหล่านี้ได้ง่ายเมื่ออ่านผ่านอย่างรวดเร็ว
          วิธีแก้คือรวบรวมลิงค์เหล่านี้ไว้ในส่วนของ "แหล่งข้อมูลที่มีประโยชน์" อาจอยู่ด้านบนหรือด้านล่างของหน้านั้นก็ได้เพื่อเปิดโอกาสให้ผู้อ่านเห็นชัดขึ้นและเกิดความต่อเนื่องของเนื้อหา



การออกแบบกราฟฟิกสำหรับเว็บไซต์

รูปแบบกราฟฟิกสำหรับเว็บ ( GIF, JPG, และ PNG )

GIF ย่อมาจาก Graphic Interchange Format


   ได้รับควมนิยมในยุคแรก

    มีระบบสีแบบ Index ซึ่งมีข้อมูลสีขนาด 8 บิต ทำให้มีสีมากสุด 256 สี 
    มีการบีบอัดข้อมูลตามแนวของพิกเซล เหมาะสมสำหรับกราฟฟิกที่ประกอบด้วยสีพื้น

JPG ย่อมาจาก Joint Photographic 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 (ppi) ซึ่งเป็นหน่วยวัดความละเอียดของสิ่งพิมพ์มาใช้งานแทน ppi ความละเอียดของรูปภาพที่ใช้ในเว็บไซท์ควรมีความบะเอียดแค่ 72 ppi ก็เพียงพอแล้ว


โปรแกรมกราฟฟิกสำหรับเว็บ
        ปัจจุบันมีโปรแกรมหลายประเภทที่นำมาใช้ในการสร้างกราฟฟิกสำหรับเว็บ
                Adobe Photoshop
                Firework
               Gimp

ค่าพื้นฐานที่สามารถเลือกปรับได้คือ รูปแบบไฟล์, ชุดสีที่ใช้, จำนวนสี, ระดับความสูญเสีย, ความโปร่งใส และสีพื้นหลัง








ไม่มีความคิดเห็น:

แสดงความคิดเห็น