Web Page คือ เอกสารที่เราเปิดดูใน Web ส่วนใหญ่สร้างจากภาษา HTML
Web Site คือ ชื่อเครื่องคอมพิวเตอร์ที่เก็บเว็บเพจ เมื่อเราต้องการดูข้อมูล
เว็บเพจ เราต้องใช้โปรแกรมเบราเซอร์เป็นเครื่องมือ
Home Page คือ แต่ละเว็บไซต์ จะประกอบด้วยเว็บเพจหลายหน้า แต่ต้องมีการกำหนดไว้ว่า จะให้หน้าใดเป็นหน้าแรก เว็บเพจ ที่เป็นหน้าแรกนี้ เรียกว่า "Home Page"
Link คือ เป็นคุณสมบัติที่ทำไห้เว็บเพจมีความแตกต่างจากเอกสารทั่วไป และเป็นปัจจัยหนึ่งที่ทำไห้www ประสบความสำเร็จ
Web Browser คือ โปรแกรมที่เป็นประตูสู่ www ในปัจจุบันมีไห้เลือกหลายตัว
เช่น InternetExplorer Safari FireFox เป็นต้น
URL คือ ตำแหน่งเฉพาะเจาะจงที่เราต้องระบุ เมื่อเราต้องการเรียกดูข้อมูล
เรียกตำแหน่งนั้นว่า URL
.............................................................................................
บทที่ 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.แนวทางการดูแลและพัฒนาต่อไป
.............................................................................................
บทที่ 4 จัดระบบข้อมูลในเว็บ
ความจำเป็นในการจัดระบบข้อมูล ช่วยสร้างความเข้าใจ อธิบายและควบคุมการรับรู้ข้อมูลของผู้คน ทำให้ผู้ใช้เข้ามาค้นหาข้อมูลได้อย่างสะดวกและตรงตามความต้องการ
การจัดลำดับความสำคัญของข้อมูล ได้แก่ การกำหนดตำแหน่งของข้อมูลและเทคนิคที่ใช้นำเสนอ ผู้ออกแบบควรจัดกลุ่มข้อมูลที่มีความสัมพันธ์กันให้อยู่ในกลุ่มเดียวกัน โดยการจัดกลุ่มกระทำได้หลายลักษณะ
1.สร้างการเชื่อมโยงแบบรายการย่อย
2.จำกัดของเขตข้อมูลที่สัมพันธ์กันเอาไว้
3.จัดลำดับความสำคัญของข้อมูลแบบซ้อนกัน
การจัดระบบข้อมูลประกอบด้วย
1.แบบแผนระบบข้อมูล (Organization Schemes)
2.โครงสร้างระบบข้อมูล (Organization Structure)
แบบแผนระบบข้อมูล ประกอบด้วย
1.แบบแผนระบบข้อมูลแบบแน่นอน ได้แก่ ระบบข้อมูลตามตัวอักษร ระบบข้อมูลตามลำดับเวลา หรือตามพื้นที่
2.แบบแผนระบบข้อมูลแบบไม่แน่นอน เป็นการรวบรวมข้อมูลที่คล้ายหรือใกล้เคียงกัน ดังนั้นการค้นหาข้อมูลประเภทนี้ผู้ใช้สามารถเรียนรู้รายละเอียดของสิ่งที่ค้นหาเพิ่มขึ้นตามจำนวนครั้งที่เราค้นหา
3.แบบแผนข้อมูลผสม
โครงสร้างระบบข้อมูลในเว็บไซท์ แบ่งเป็น3 รูปแบบ
1.โครงสร้างข้อมูลแบบลำดับชั้น เหมาะกับข้อมูลบนเว็บ เพราะในทุกเว็บจะเริ่มจากหน้าโฮมเพจก่อนเสมอ ความกว้างของโครงสร้างระบบข้อมูลควรมี 7 บวก ลบ 2 รายการ ส่วนความลึกไม่ควรเกิน 4-5 ชั้น 2.โครงสร้างข้อมูลแบบไฮเปอร์เท็กซ์ มีลักษณะคล้ายเครือข่ายโยงใย จะแบ่งออกเป็น 2 ส่วน คือรายการหรือกลุ่มข้อมูลที่ถูกลิงค์ กับลิงค์ที่เชื่อมโยงข้อมูลเหล่านั้น
3.โครงสร้างข้อมูลแบบฐานข้อมูล มักนิยมใช้กับเว็บที่มีขนาดใหญ่ เพิ่มความสามารถในการค้นหาข้อมูลได้อย่างรวดเร็วและถูกต้องช่วยสร้างความเข้าใจ อธิบายและควบคุมการรับรู้ข้อมูลของผู้คน ทำให้ผู้ใช้เข้ามาค้นหาข้อมูลได้อย่างสะดวกและตรงตามความต้องการ
ความจำเป็นในการจัดระบบข้อมูล ช่วยสร้างความเข้าใจ อธิบายและควบคุมการรับรู้ข้อมูลของผู้คน ทำให้ผู้ใช้เข้ามาค้นหาข้อมูลได้อย่างสะดวกและตรงตามความต้องการ
การจัดลำดับความสำคัญของข้อมูล ได้แก่ การกำหนดตำแหน่งของข้อมูลและเทคนิคที่ใช้นำเสนอ ผู้ออกแบบควรจัดกลุ่มข้อมูลที่มีความสัมพันธ์กันให้อยู่ในกลุ่มเดียวกัน โดยการจัดกลุ่มกระทำได้หลายลักษณะ
1.สร้างการเชื่อมโยงแบบรายการย่อย
2.จำกัดของเขตข้อมูลที่สัมพันธ์กันเอาไว้
3.จัดลำดับความสำคัญของข้อมูลแบบซ้อนกัน
การจัดระบบข้อมูลประกอบด้วย
1.แบบแผนระบบข้อมูล (Organization Schemes)
2.โครงสร้างระบบข้อมูล (Organization Structure)
แบบแผนระบบข้อมูล ประกอบด้วย
1.แบบแผนระบบข้อมูลแบบแน่นอน ได้แก่ ระบบข้อมูลตามตัวอักษร ระบบข้อมูลตามลำดับเวลา หรือตามพื้นที่
2.แบบแผนระบบข้อมูลแบบไม่แน่นอน เป็นการรวบรวมข้อมูลที่คล้ายหรือใกล้เคียงกัน ดังนั้นการค้นหาข้อมูลประเภทนี้ผู้ใช้สามารถเรียนรู้รายละเอียดของสิ่งที่ค้นหาเพิ่มขึ้นตามจำนวนครั้งที่เราค้นหา
3.แบบแผนข้อมูลผสม
โครงสร้างระบบข้อมูลในเว็บไซท์ แบ่งเป็น3 รูปแบบ
1.โครงสร้างข้อมูลแบบลำดับชั้น เหมาะกับข้อมูลบนเว็บ เพราะในทุกเว็บจะเริ่มจากหน้าโฮมเพจก่อนเสมอ ความกว้างของโครงสร้างระบบข้อมูลควรมี 7 บวก ลบ 2 รายการ ส่วนความลึกไม่ควรเกิน 4-5 ชั้น 2.โครงสร้างข้อมูลแบบไฮเปอร์เท็กซ์ มีลักษณะคล้ายเครือข่ายโยงใย จะแบ่งออกเป็น 2 ส่วน คือรายการหรือกลุ่มข้อมูลที่ถูกลิงค์ กับลิงค์ที่เชื่อมโยงข้อมูลเหล่านั้น
3.โครงสร้างข้อมูลแบบฐานข้อมูล มักนิยมใช้กับเว็บที่มีขนาดใหญ่ เพิ่มความสามารถในการค้นหาข้อมูลได้อย่างรวดเร็วและถูกต้องช่วยสร้างความเข้าใจ อธิบายและควบคุมการรับรู้ข้อมูลของผู้คน ทำให้ผู้ใช้เข้ามาค้นหาข้อมูลได้อย่างสะดวกและตรงตามความต้องการ
.............................................................................................
บทที่6การออกแบบหน้าเว็บไซต์
หลักสำคัญในการออกเเบหน้าเว็บไซต์ คือ การใช้รูปภาพเเละองค์ประกอบต่างๆ ร่วมกันเพื่อสื่อความหมายเกี่ยวกับเนื้อหาหรือลักษณะสำคัญของเว็บให้น่าสนใจบนพื้นฐานของความเรียบง่ายเเละสะดวกของผู้ใช้
เเนวคิดในการออกเเบหน้าเว็บ เรียนรู้จากเว็บไซต์ต่างๆ
ประยุกต์รูปแบบจากสื่อพิมพ์
ใช้เเบบจำลองเปรียบเทียบ (Metaphor)
ออกแบบอย่างสร้างสรรค์
ใช้เเบบจำลองเปรียบเทียบ (Metaphor)การใช้เเบบจำลองเปรียบเทียบ คือการใช้สิ่งที่คุ้นเคในการอธิบายถึงสิ่งที่ไม่คุ้นเคย ไม่ว่าจะเป็น
รูปภาพจาก สิ่งพิมพ์หรือรูปแบบของร้านขายของ สิ่งสำคัญ คือ รูปแบบที่เลือกมาใช้ต้องมีลักษณะ
ที่คนส่วนใหญ่คุ้นเคย เข้าใจง่าย สนับสนุนเเนวคิดเเละส่งเสริมกระบวนการสื่อสารของเว็บ
ลักษณะต่างๆ ของเเบบจำลองการใช้เเบบจำลองมีด้วยกัน 3 ประเภท ดังนี้
1. จำลองเเบบการจัดระบบ (Organizational metaphor) คือใช้ประโยชน์จากความคุ้นเคยของ
การจัดระบบที่คุ้นเคย เพื่อให้ผู้ใช้เข้าถึงโครงสร้างในระบบใหม่ได้ง่ายขึ้น
2. จำลองการใช้งาน (Functional metaphor)
คือเชื่อมโยงการใช้งานที่สามารถทำได้ในชีวิตจริงกับการใช้งานเว็บ เช่น เว็บโรงภาพยนต์
3. จำลองลักษณะที่มองเห็น (Visual metaphor)
คือวิธีนี้จะเกี่ยวข้องกับสิ่งที่มีลัษณะที่คุ้นเคยของคนทั่วไป
เเนวคิดในการออกเเบหน้าเว็บ เรียนรู้จากเว็บไซต์ต่างๆ
ประยุกต์รูปแบบจากสื่อพิมพ์
ใช้เเบบจำลองเปรียบเทียบ (Metaphor)
ออกแบบอย่างสร้างสรรค์
ใช้เเบบจำลองเปรียบเทียบ (Metaphor)การใช้เเบบจำลองเปรียบเทียบ คือการใช้สิ่งที่คุ้นเคในการอธิบายถึงสิ่งที่ไม่คุ้นเคย ไม่ว่าจะเป็น
รูปภาพจาก สิ่งพิมพ์หรือรูปแบบของร้านขายของ สิ่งสำคัญ คือ รูปแบบที่เลือกมาใช้ต้องมีลักษณะ
ที่คนส่วนใหญ่คุ้นเคย เข้าใจง่าย สนับสนุนเเนวคิดเเละส่งเสริมกระบวนการสื่อสารของเว็บ
ลักษณะต่างๆ ของเเบบจำลองการใช้เเบบจำลองมีด้วยกัน 3 ประเภท ดังนี้
1. จำลองเเบบการจัดระบบ (Organizational metaphor) คือใช้ประโยชน์จากความคุ้นเคยของ
การจัดระบบที่คุ้นเคย เพื่อให้ผู้ใช้เข้าถึงโครงสร้างในระบบใหม่ได้ง่ายขึ้น
2. จำลองการใช้งาน (Functional metaphor)
คือเชื่อมโยงการใช้งานที่สามารถทำได้ในชีวิตจริงกับการใช้งานเว็บ เช่น เว็บโรงภาพยนต์
3. จำลองลักษณะที่มองเห็น (Visual metaphor)
คือวิธีนี้จะเกี่ยวข้องกับสิ่งที่มีลัษณะที่คุ้นเคยของคนทั่วไป
หลักการออกเเบบหน้าเว็บ
1.สร้างลำดับชั้นความสำคัญขององค์ประกอบจัดตำเเหน่งเเละลำดับขององค์ประกอบ เเสดงลำดับความสำคัญของข้อมูลที่ต้องการให้ผู้ใช้ได้รับ
เนื่องจากภาษาส่วนใหญ่จะอ่านจากซ้ายไปขวา เเละจากบน ลงล่าง จึงควรจัดวางสิ่งที่สำคัญ
ไว้ที่ส่วนบนหรือด้านซ้ายของหน้าอยู่เสมอ
2. สร้างรูปแบบ บุคลิกเเละสไตล์รูปแแบบ การเลือกรูปแบบเว็บที่เหมาะสมจะช่วยสร้างความเข้าใจของผู็ใช้ได้ดีขึ้น
บุคลิก เว็บเเต่ละประเภทอาจมีบุคลิกลักษณะแตกต่างกันขึ้นอยู่กับเนื้อหาเเละเป้าหมายในการ
นำเสนอสไตล์ คือ ลักษณะการจัดโครงสร้างของหน้า ณุปแบบกราฟิก ชนิดเเละการจัดตัวอักษ
ร ชุดสีที่ใช้ รวมถึงองค์ประกอบอื่นๆ ซึ่งไม่ควรสร้างตามใจชอบ
3.สร้างความสม่ำเสมอตลอดทั่วทั้งไซต์ความสม่ำเสมอของโครงสร้างเว็บเเละระบบเนวิเกชั่น ทำให้รู้สึกคุ้นเคยเเละสามารถคาดการณ์
ลักษณะของเว็บได้ล่วงหน้า ทางด้านเทคนิดสามารถใช้ css กำหนดได้เพื่อให้เป็นมารตฐานเดียวกัน
4.จัดวางองค์ประกอบที่สำคัญไว้ในส่วนบนของหน้าเสมอควรประกอบด้วย
1.ชื่อของเว็บ เพื่อให้ผู้ใช้ได้รู้ทันทีว่ากำลังอยู่ในเว็บอะไร
2.ชื่อหัวเรื่อง
3.สิ่งสำคัญที่เราต้องการโปรโมตเว็บ
4.ระบบเนวิเกชั่น
5.สร้างจุดสนใจด้วยความเเตกต่างการจัดองค์ประกอบให้ภาพรวมของหน้ามีความเเตกต่างเป็นสิ่งสำคัญที่จะนำสายตาผู้อ่านไป
ยังบริเวณต่างๆ โดยการใช้สีที่ตัดกัน
6. จัดเเต่งหน้าเว็บให้เป็นระเบียบ
เนือ้หาในหน้าเว็บจำเป็นต้องอยู่ในรูปแบบที่ดูง่ายเเยกเป็นสัดส่วน เเละดูไม่เเน่นจนเกินไป
7.ใช้กราฟฟิกอย่างเหมาะสม ควรใช้กราฟิกที่เป็นไอคอน ปุ่ม ลายเส้น เเละสิ่งอื่นๆ ตามความเหมาะสมเเละไม่มากเกินไป
เพื่อหลีกเลี่ยงโครงสร้างที่หยุ่งเหยิงเเละไม่เป็นระเบียบ ส่วนตัวอักษรขนาดใหญ่ด้วยคำสั่ง h1
เเละ h2 ควรใช้ในปริมาณน้อยๆ เพื่อให้ได้ผลลัพธ์สูงสุด
บทที่8เลือกใช้สีสำหรับเว็บไซต์
สีสันเป็นสิ่งสำคัญมากในการดึงดูดความสนใจของผู้ใช้ เนื่องจากเป็นสิ่งแรกที่ผู้ใช้มองเห็น
- การใช้สีพื้นใกล้เคียงกับตัวอักษร บางครั้งลำบากในการอ่าน
- การใช้สีมากเกินอาจสร้างความสับสนให้ผู้อ่านได้
- การใช้สีที่กลมกลืน ช่วยให้น่าดูมากยิ่งขึ้น
ประโยชน์ของสีในเว็บไซต์
- ชักนำสายตาทุกบริเวณในหน้าเว็บ
- เชื่อมโยงบริเวณที่ไดรับการออกแบบเข้าด้วยกัน
- แบ่งบริเวณต่างๆออกจากกัน
- ดึงดูดความสนใจของผู้อ่าน
- สร้างอารมณ์โดยรวมของเว็บ
- สร้างระเบียบ
- ส่งเสริมเอกลักษณ์ขององค์กรหรือหน่วยงานนั้นๆ
การผสมสี มี 2 แบบ
- การผสมแบบบวก เป็นรูปแบบการผสมของแสงไม่ใช่การผสมของวัตถุที่มีสีบนกระดาษ
- การผสมแบบลบ ไม่เกี่ยวข้องกับแสงแต่เกี่ยวกับการดูดกลืนและสะท้อนแสงของวัตถุต่างๆ
รูปแบบชุดสีพื้นฐาน (Simple Color Schemes)
- ชุดสีร้อน
- ชุดสีเเบบเดียว
- ชุดสีที่คล้ายคลึงกัน
- ชุดสีตรงข้ามเคียง
- ชุดสีตรงข้ามข้างเคียงทั้ง 2 ด้าน
- ชุดสีเย็น
- ชุดสีเเบบสามเส้า
- ชุดสีตรงข้าม
สีกับอารมณ์ ความรู้สึก เเละความสัมพันธ์กับสิ่งต่างๆ
สีเเดง เเสดงถึง พลัง อำนาจความโมโห ความก้าวร้าว
สีน้ำเงิน เเสดงถึง ความซื่อสัตย์ ความมั่นคง ปลอดภัย
สีเขียว เเสดงถึง ธรรมชาต สุขภาพ ความยินดี
สีเหลือง เเสดงถึง ความสดใส ร่าเริง การมองโลกในเเง่ดี ความหวัง ความอบอุ่น
สีม่วง เเสดงถึง ความสูงส่ง ความสร้างสรรค์ ความรอบรู้ ความแปลกใหม่
สีส้ม เเสดงถึง กำลังความสามารถ ความเข้มเเข็ง กระตือรือร้น
สีน้าตาล เเสดงถึง ความเรียบง่าย ความสะดวกสบาย ความมั่นคง เชื่อถือได้
สีเทา แสดงถึง ความสุภาพ ความเป็นไปได้ ความมั่นคง
สีขาว เเสดงถึง ความบริสุทธฺ์ ความไร้เดียงสา ความรัก ความฉลาด
สีดำ เเสดงถึง อำนาจ ความฉลาด ความเป็นเลิศ ความสุขม รอบคอบ
รูปแบบชุดสีพื้นฐาน (Simple Color Schemes)
- ชุดสีร้อน
- ชุดสีเเบบเดียว
- ชุดสีที่คล้ายคลึงกัน
- ชุดสีตรงข้ามเคียง
- ชุดสีตรงข้ามข้างเคียงทั้ง 2 ด้าน
- ชุดสีเย็น
- ชุดสีเเบบสามเส้า
- ชุดสีตรงข้าม
สีกับอารมณ์ ความรู้สึก เเละความสัมพันธ์กับสิ่งต่างๆ
สีเเดง เเสดงถึง พลัง อำนาจความโมโห ความก้าวร้าว
สีน้ำเงิน เเสดงถึง ความซื่อสัตย์ ความมั่นคง ปลอดภัย
สีเขียว เเสดงถึง ธรรมชาต สุขภาพ ความยินดี
สีเหลือง เเสดงถึง ความสดใส ร่าเริง การมองโลกในเเง่ดี ความหวัง ความอบอุ่น
สีม่วง เเสดงถึง ความสูงส่ง ความสร้างสรรค์ ความรอบรู้ ความแปลกใหม่
สีส้ม เเสดงถึง กำลังความสามารถ ความเข้มเเข็ง กระตือรือร้น
สีน้าตาล เเสดงถึง ความเรียบง่าย ความสะดวกสบาย ความมั่นคง เชื่อถือได้
สีเทา แสดงถึง ความสุภาพ ความเป็นไปได้ ความมั่นคง
สีขาว เเสดงถึง ความบริสุทธฺ์ ความไร้เดียงสา ความรัก ความฉลาด
สีดำ เเสดงถึง อำนาจ ความฉลาด ความเป็นเลิศ ความสุขม รอบคอบ
