LECTURE

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

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

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

phase 3:พัฒนาโครงสร้างเว็บไซต์
6.จัดระบบข้อมูล
7.จัดทำโครงสร้างข้อมูล
8.พัฒนาระบบเนวิเกชัน
สิ่งที่ได้รับ
1.แนวทางการออกแบบเว็บ
2.ขอบเขตเนื้อหาและการใช้งาน
3.ข้อมูลที่ถูกจัดอย่างเป็นระบบ

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

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

บทที่ 5 

ออกแบบระบบเนวิเกชั่น Designing Web Navigation

ความสำคัญ

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

วัตถุประสงค์

    -ผู้ชมกำลังอยู่ส่วนใดของเว็บ

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

    1. ระบบเนวิเกชันแบบลำดับขั้น
    2. ระบบเนวิเกชันแบบโกลบอล
    3. ระบบเนวิเกชันแบบโลคอล
    4. ระบบเนวิเกชันเฉพาะที่
องค์ประกอบของระบบเนวิกเกชันหลัก (Main Navigation Elements)
        ระบบเนวิกเกชันที่สำคัญและพบได้มากที่สุดคือ เนวิเกชันที่อยู่ในหน้าเดียวกับเนื้อหา ไม่ใช่เนวิกเกชันที่อยู่ในหน้าแรก เนื่องจากเมื่อผู้ใช้ผ่านหน้าแรกเข้าไปสู่ภายในเว็บไซท์แล้ว ก็ไม่อยากจะกลับมาเริ่มต้นใหม่ที่หน้าแรกทุกครั้งก่อนจะเข้าไปดูเนื้อหาในส่วนอื่นๆต่อ ระบบเนวิเกชันหลักทั้งแบบโกบอลและแบบโลคอล จึงช่วยให้ผู้ใช้สามารถย้ายจากหน้าใดๆ ไปสู่ส่วนอื่นในเว็บไซท์ได้อย่างคล่องตัว องค์ประกอบของเนวิกเกชันมีได้หลายรูปแบบ ได้แก่ เนวิเกชั่นบาร์ เนวิกเกชันเฟรม Pull down, menu, pop-up menu, image map และ search box

บทที่ 9

 ออกแบบกราฟฟิกสำหรับเว็บไซต์( Designing Web Graphics )

          กราฟฟิกเป็นองค์ประกอบที่สำคัญอยางหนึ่งของเว็บเพจ ช่วยสื่อความหมายสร้างความเข้าใจให้กับผู้ใช้ 

รวมทั้งช่วยสร้างความสวยงามให้เว็บไซต์น่าดูชมยิ่งขึ้น

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

รูปแบบกราฟฟิกสำหรับเว็บ (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) ซึ่งมีประโยชน์ในการเปรียบเทียบขนาดของกราฟฟิกกับองค์ประกอบอื่นๆในหน้าเว็บ รวมถึงขนาดของหน้าต่างบราวเซอร์ด้วย

ระบบการวัดความละเอียดของรูปภาพ

         ระบบความละเอียดของรูปภาพที่แสดงผลบนจอมอนิเตอร์ควรใช้หน่วย Pixel per inch(ppi) แต่ในทางการใช้งานจะนำหน่วย dot per inch(dpi) ซึ่งเป็นหน่วยวัดความละเอียดของสิ่งพิมพ์มาใช้แทนโดยความละเอียดของรูปภาพที่ใช้ควรมีความละเอียดแค่ 72 ppi ก้อเพียงพอแล้ว

บทที่ 10

 จัดรูปแบบตัวอักษรสำหรับเว็บไซต์ (Typography on the Web)

• ตัวอักษรมีหลายชนิด แต่ละชนิดจะให้อารมณ์และความรู้สึกที่แตกต่างกัน ควรเลือกใช้ตัวอักษรให้ เหมาะสมกับเนื้อหาและข้อมูลที่ต้องการสื่อ 

• ตัวอักษรมีความสำคัญในการสื่อข้อความถึงผู้ใช้

ส่วนประกอบของตัวอักษร

Ascender : ส่วนบนของตัวอักษรพิมพ์เล็กที่สูงกว่าความสูง x-height ของตัวอักษร

Descender : ส่วนล่างของตัวอักษรพิมพ์เล็กที่ต่ำกว่าเส้น baseline

Baseline : เส้นสมมติที่ตัวอักษรส่วนใหญ่ตั้งอยู่ 

Cap height : ความสูงจากเส้น baseline ไปถึงส่วนบนสุดของตัวอักษรพิมพ์ใหญ่ 

X-height : ความสูงของตัวอักษร x ในแบบพิมพ์เล็ก ซึ่งมักใช้อ้างถึงความสูงของตัวอักษรที่ไม่รวม ascender และ descender  

 Point size : ระยะความสูงทั้งหมดวัดจากส่วนบนสุดถึงส่วนล่างสุดของตัวอักษร 

ค่าความสูง x-height : จะมีผลต่อภาพรวมของตัวอักษรและความยากง่ายในการอ่าน

ความสะดวกในการอ่าน (Legibility) 

•  หลีกเลี่ยงการใช้คำที่เป็นตัวพิมพ์ใหญ่ทั้งหมด เพราะจะทำให้อ่านยาก และลดความสะดุดตาลง

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

สิ่งที่ควรคำนึงในการจัดข้อความให้หน้าเว็บ 

• การจัดตำแหน่ง (Alignment)
• ช่องว่างระหว่างตัวอักษร และช่องว่างระหว่างคำ
• การจัดตำแหน่งแบบ justify ทำให้เกิดช่องว่างของแต่ละคำ
• ระยะห่างระหว่างบรรทัด
• ความยาวของหน้าเว็บ
• ขนาดของตัวอักษร
• ดึงดูดความสนใจด้วยอักษรตัวใหญ่
• การเน้นข้อความให้เด่นชัด
• การใช้สีกับตัวอักษร
• การกำหนดขอบแบบ Aliased และ Anti-aliased

คำแนะนำในการใช้ตัวอักษรในหน้าเว็บ

• ไม่ควรใช้ตัวอักษรชนิดที่หายากหรือไม่ได้มาพร้อมกับโปรแกรมต่างๆหรือเครื่องคอมฯ
• ระบุชนิดตัวอักษรให้ครอบคลุม
• กำหนดลักษณะของตัวอักษรที่อยู่ในทุกช่องของตาราง
• ระบุขนาดของตัวษรเสมอ

• ใช้ CSS ในการควบคุมรูปแบบการแสดงผล