Lecture
บทที่ 2 กระบวนการพัฒนาเว็บไซต์
1. จัดระบบโครงสร้างข้อมูล (Information Architecture)
มี 5 Phase 13 ขั้นตอน
- phaseที่1 : สำรวจปัจจัยสำคัญ (Research)
1. รู้จักตัวเอง : กำหนดเป้าหมายหลักของเว็บ คือ จำเป็นต้องมี,อยากให้มี,ยังรอได้
2. เรียนรู้ผู้ใช้ : กำหนดกลุ่มเป้าหมาย
3. สำรวจการแข่งขันและคู่แข่ง : สำรวจบรรยากาศการแข่งขัน ,เรียนรู้จากคู่แข่ง
- phaseที่2 : พัฒนาเนื้อหา (Site Content)
4. สร้างกลยุทธ์การออกแบบ
- ประยุกต์เนื้อหาจากสื่ออื่น
- เลือกใช้เทคโนโลยีที่เหมาะสม
5.หาข้อสรุปของขอบเขตเนื้อหา
- กำหนดเนื้อหาและการใช้งานที่จำเป็น
- phaseที่3 : พัฒนาโครงสร้างเว็บไซต์ (Site Structure)
6. จัดระบบข้อมูล : จัดกลุ่มและระบุชื่อเนื้อหา คือ ร่างแผนผังโครงสร้าง
7. จัดทำโครงสร้างข้อมูล
- จัดทำรายการโครงสร้างของเว็บ : ควรมองเห็นข้อมูลในรูปแบบกว้างๆแล้วค่อยแตกย่อยลงไป
- จัดทำแผนผังโครงสร้างของเว็บ : เป็นการทำ Site Map
8. พัฒนาระบบเนวิเกชัน
- วางแผนแนวทางการเคลื่อนที่ภายในเว็บไซต์ : แสดงแนวทางการเชื่อมโยงที่ชัดเจน
- สร้างระบบเนวิเกชัน : เริ่มต้นจากการพิจารณาแผนผังโครงสร้างเว็บ
- phaseที่4 : ออกแบบและพัฒนาหน้าเว็บ(Visual Design)
9. ออกแบบลักษณะหน้าตาเว็บเพจ
- สร้างแบบจำลองรายละเอียดข้อมูลในหน้าเว็บ : โดยการร่างเป็นตัวหนังสือก่อน
- จัดแบ่งพื้นที่ในหน้าเว็บ: กำหนดขอบเขต ว่าอะไรอยู่ตรงไหน
- ออกแบบโครงร่างของหน้าตาเว็บ
10. พัฒนาเว็บต้นแบบและโครงสร้างเว็บขั้นตอนสุดท้าย
- สร้างและทดสอบเว็บต้นฉบับ
- สรุปแผนผังโครงสร้างเว็บขั้นสุดท้าย : ผลลัพธ์ขั้นสุดท้าย เรียกว่า Final architecture blueprint
- ระบุข้อกำหนดในการพัฒนาเว็บไซต์ : ข้อกำหนด (Specs) คือ เอกสารที่กำหนดลักษณะการออกแบบ
- กำหนดรูปแบบมาตรฐาน (Style Guide) :ภายในเว็บควรจะมีลักษณะสม่ำเสมอ
- phaseที่5 : พัฒนาและดำเนินการ (Production & Operation)
11. ลงมือพัฒนาเว็บ
- เรียบเรียงและตรวจสอบข้อมูล
- ตกแต่งหน้าเว็บให้สมบูรณ์
- สร้างเทมเพลตสำหรับหน้าเว็บ
- พัฒนาระบบการใช้งานของเว็บ
12. เปิดตัวเว็บไซต์ (Launch)
- ทดสอบคุณภาพการใช้งานและความถูกต้อง : การใช้งาน ความสม่ำเสมอและความถูกต้อง
- ทำให้เว็บเป็นที่รู้จัก : ลงทะเบียนกับ Search engine
13. ดูแลผู้ใช้
- เพิ่มข้อมูลใหม่โดยยึดรูปแบบมาตรฐาน(โครงสร้างเดิม)
- วิเคราะห์สถิติการใช้บริการในเว็บ : ตรวจสอบดูว่าช่วงเวลาใดมีผู้เข้าใช้เป็นจำนวนมากที่สุด
- ตรวจสอบความถูกต้องของลิงค์ : ลิงค์ผิดพลาดจะรู้สึกไม่น่าเชื่อถือ
- ตรวจสอบเนื้อหาและการใช้งานเว็บให้ถูกต้องทันสมัยและตรงกับความต้องการของผู้ใช้อยู่เสมอ
บทที่ 4 จัดระบบข้อมูลในเว็บ - ปัญหาความคลุมเครือของกลุ่มข้อมูล
- การแบ่งข้อมูลต้องอาศัยพื้นฐานทางด้านภาษามาช่วยเพราะคำหนึ่งคำมีความหมายได้หลายอย่างในเหตุการณ์ต่างกัน
- การแบ่งหมวกหมู่ในเว็บมักจะเกี่ยวข้องกับสิ่งที่เป็นนามธรรม เช่น หัวเรื่องหรือข้อความ ดังนั้นจึงเป็นการยากที่จะทำให้ทุกคนเข้าใจระบบการจัดกลุ่มข้อมูลที่เราได้ออกแบบไว้
- การจัดลำดับความสำคัญของข้อมูล
ได้แก่ การจัดกลุ่มข้อมูลการกำหนดตำแหน่งของข้อมูลและเทคนิคที่ใช้นำเสนอผู้ออกแบบควรจัดกลุ่มข้อมูลที่มีความสัมพันธ์กันให้อยู่ในกลุ่มเดียวกัน โดยรูปแบบการจัดกลุ่มข้อมูลอาจกระทำได้หลายลักษณะ หลักการออกแบบโครงสร้างระบบข้อมูลแบบลำดับชั้นควรมีจำนวน 7 บวกลบ 2 รายการในเมนูที่มีจำนวนรายการมากกว่า 10 จะสร้างความรู้สึกว่ามากเกินไปส่วนความลึกไม่ควรเกิน 4-5 ชั้น เพราะจะทำให้ผู้ใช้อาจหมดหวังและเลิกล้มความตั้งใจได้ โครงสร้างระบบข้อมูลแบบไฮเปอร์เท็กซ์มีลักษณะคล้ายเครือข่ายโยงใยโครงสร้างระบบนี้แบ่งเป็น 2 ส่วนคือ รายการ หรือกลุ่มข้อมูลที่ถูกลิงค์กับลิงค์ที่เชื่อมโยงข้อมูลเหล่านั้นส่วนใหญ่จึง มักนำระบบนี้มาใช้เป็นส่วนเสริมให้กับโครงสร้างข้อมูลแบบลำดับชั้น
- โครงสร้างข้อมูลแบบฐานข้อมูล
มักนิยมใช้กับเว็บขนาดใหญ่ การนำระบบฐานข้อมูลมาใช้ในเว็บจะช่วยเพิ่มความสามารถในการค้นหาข้อมูลได้อย่างรวดเร็วและถูกต้อง แต่เป็นเรื่องยากที่จะเอาข้อมูลทั้งหมดมาไว้ในฐานข้อมูล
บทที่ 8
การใช้สีในการออกแบบเว็บไซต์
(Designing Web Colors)
การสร้างสีสันบนหน้าเว็บเป็นสิ่งที่สื่อความหมายของเว็บไซต์ได้อย่างชัดเจน การเลือกใช้สีให้เหมาะสม กลมกลืน ไม่เพียงแต่จะสร้างความพึงพอใจให้กับผู้ใช้ แต่ยังสามารถทำให้เห็นถึงความแตกต่างระหว่างเว็บไซต์ได้ สีเป็นองค์ประกอบหลักสำหรับการตกแต่งเว็บ จึงจำเป็นอย่างยิ่งที่จะต้องทำความเข้าใจเกี่ยวกับการใช้สี
ระบบสีที่แสดงบนจอคอมพิวเตอร์ มีระบบการแสดงผลผ่านหลอดลำแสงที่เรียกว่า CRT (Cathode ray tube) โดยมีลักษณะระบบสีแบบบวก อาศัยการผสมของของแสงสีแดง สีเขียว และสีน้ำเงิน หรือระบบสี RGBสามารถกำหนดค่าสีจาก 0 ถึง 255 ได้ จากการรวมสีของแม่สีหลักจะทำให้เกิดแสงสีขาว มีลักษณะเป็นจุดเล็กๆ บนหน้าจอไม่สามารถมองเห็นด้วยตาเปล่าได้ จะมองเห็นเป็นสีที่ถูกผสมเป็นเนื้อสีเดียวกันแล้ว จุดแต่ละจุดหรือพิกเซล (Pixel) เป็น ส่วนประกอบของภาพบนหน้าจอคอมพิวเตอร์ โดยจำนวนบิตที่ใช้ในการกำหนดความสามารถของการแสดงสีต่าง ๆ เพื่อสร้างภาพบนจอนั้นเรียกว่า บิตเด็ป (Bit-depth) ในภาษา HTML มีการกำหนดสีด้วยระบบเลขฐานสิบหก ซึ่งมีเครื่องหมาย (#) อยู่ด้านหน้าและตามด้วยเลขฐานสิบหกจำนวนอักษรอีก 6 หลัก โดยแต่ละไบต์ (byte) จะมีตัวอักษรสองตัว แบ่งออกเป็น 3 กลุ่ม เช่น #FF12AC การใช้ตัวอักษรแต่ละไบต์นี้เพื่อกำหนดระดับความเข้มของแม่สีแต่ละสีของชุดสี RGB โดย 2 หลักแรก แสดงถึงความเข้มของสีแดง 2 หลักต่อมา แสดงถึงความเข้มของสีเขียว 2 หลักสุดท้ายแสดงถึงความเข้มของสีน้ำเงิน สี มีอิทธิพลในเรื่องของอารมณ์การสื่อความหมายที่เด่นชัด กระตุ้นการรับรู้ทางด้านจิตใจมนุษย์ สีแต่ละสีให้ความรู้สึก อารมณ์ที่ไม่เหมือนกัน สีบางสีให้ความรู้สึกสงบ บางสีให้ความรู้สึกตื่นเต้นรุนแรง สีจึงเป็นปัจจัยสำคัญอย่างยิ่งต่อการออกแบบเว็บไซต์ ดังนั้นการเลือกใช้โทนสีภายในเว็บไซต์เป็นการแสดงถึงความแตกต่างของสีที่ แสดงออกทางอารมณ์ มีชีวิตชีวาหรือเศร้าโศก รูปแบบของสีที่สายตาของมนุษย์มองเห็น สามารถแบ่งออกเป็น 3 กลุ่ม คือ
- สีโทนร้อน (Warm Colors) เป็น กลุ่มสีที่แสดงถึงความสุข ความปลอบโยน ความอบอุ่น และดึงดูดใจ สีกลุ่มนี้เป็นกลุ่มสีที่ช่วยให้หายจากความเฉื่อยชา มีชีวิตชีวามากยิ่งขึ้น
- สีโทนเย็น (Cool Colors) แสดงถึงความที่ดูสุภาพ อ่อนโยน เรียบร้อย เป็นกลุ่มสีที่มีคนชอบมากที่สุด สามารถโน้มนาวในระยะไกลได้
- สีโทนกลาง (Neutral Colors) สี ที่เป็นกลาง ประกอบด้วย สีดำ สีขาว สีเทา และสีน้ำตาล กลุ่มสีเหล่านี้คือ สีกลางที่สามารถนำไปผสมกับสีอื่น ๆ เพื่อให้เกิดสีกลางขึ้นมา
โปรแกรมกราฟฟิกสำหรับเว็บ- Adobe PhotoShop
- Adobe ImageReady
- Firework
