กระบวนการพัฒนาเว็บไซต์
WEB DEVELOPMENT PROCESSES• การจัดระบบโครงสร้างข้อมูลเป็นพื้นฐานในการออกแบบเว็บไซท์ที่ดี ได้แก่ รูปแบบการนำเสนอ ระบบการทำงานแบบจำลอง ระบบเนวิเกชัน และอินเตอร์เฟสของเว็บดังนั้น การจัดระบบโครงสร้างข้อมูลจึงเป็นสิ่งสำคัญที่เกี่ยวข้องอยู่ในกระบวนการออกแบบเว็บไซต์
• การจัดระบบโครงสร้างข้อมูล คือการพิจารณาว่าเว็บควรจะมีข้อมูลและการทำงานใดบ้าง โดยเริ่มจากการกำหนดเป้าหมาย กลุ่มผู้ใช้เป้าหมาย เนื้อหาและการใช้งานที่จำเป็น นำมาจัดกลุ่มให้เป็นระบบ
• การจัดระบบโครงสร้างข้อมูล คือการพิจารณาว่าเว็บควรจะมีข้อมูลและการทำงานใดบ้าง โดยเริ่มจากการกำหนดเป้าหมาย กลุ่มผู้ใช้เป้าหมาย เนื้อหาและการใช้งานที่จำเป็น นำมาจัดกลุ่มให้เป็นระบบ
การจัดระบบโคลงสร้างของข้อมูล(Information achitacture)
• Phase 1 : สำรวจปัจจัยสำคัญ(Research)
1. รู้จักตัวเอง-กำหนดเป้าหมายและสำรวจความพร้อม
2. เรียนรู้ผู้ใช้-ระบุกลุ่มผู้ใช้และศึกษาความต้องการการ
3. ศึกษาคู่แข่ง-สำรวจการแข่งขันและการเรียนรู้คู่แข่ง
2. เรียนรู้ผู้ใช้-ระบุกลุ่มผู้ใช้และศึกษาความต้องการการ
3. ศึกษาคู่แข่ง-สำรวจการแข่งขันและการเรียนรู้คู่แข่ง
• สิ่งที่ได้รับ
1. เป้าหมายหลักของเว็บ
2. ความต้องการของผู้ใช้
3. กลยุทธ์ในการแข่งขัน
2. ความต้องการของผู้ใช้
3. กลยุทธ์ในการแข่งขัน
Phase 2 : พัฒนาเนื้อหา(Site Content)
4. สร้างกลยุทธ์การออกแบบ
5. หาข้อสรุปขอบเขตเนื้อหา
• สิ่งที่ได้รับ
5. หาข้อสรุปขอบเขตเนื้อหา
• สิ่งที่ได้รับ
1. แนวทางการออกแบบเว็บ
2. ขอบเขตเนื้อหาและการใช้งาน
3. ข้อมูลที่ถูกจัดอย่างเป็นระบบ
2. ขอบเขตเนื้อหาและการใช้งาน
3. ข้อมูลที่ถูกจัดอย่างเป็นระบบ
Phase 3 : พัฒนาโครงสร้างเว็บไซท์(Site Structure)
6. จัดระบบข้อมูล
7. จัดทำโครงสร้างข้อมูล
8. พัฒนาระบบเนวิเกชัน
7. จัดทำโครงสร้างข้อมูล
8. พัฒนาระบบเนวิเกชัน
• สิ่งที่ได้รับ
1. แนวทางการออกแบบเว็บ
2. ขอบเขตเนื้อหาและการใช้งาน
3. ข้อมูลที่ถูกจัดอย่างเป็นระบบ
2. ขอบเขตเนื้อหาและการใช้งาน
3. ข้อมูลที่ถูกจัดอย่างเป็นระบบ
Phase 4 : ออกแบบและพัฒนาหน้าเว็บ(Visual Design)
9. ออกแบบลักษณะหน้าตาเว็บ
10. พัฒนาเว็บต้นแบบและข้อกำหนดสุดท้าย
10. พัฒนาเว็บต้นแบบและข้อกำหนดสุดท้าย
• สิ่งที่ได้รับ
1. ลักษณะหน้าตาของเว็บ
2. เว็บต้นแบบที่จะใช้ในการพัฒนา
3. รูปแบบโครงสร้างของเว็บ
4. ข้อกำหนดในการพัฒนาเว็บ
2. เว็บต้นแบบที่จะใช้ในการพัฒนา
3. รูปแบบโครงสร้างของเว็บ
4. ข้อกำหนดในการพัฒนาเว็บ
Phase 5 : พัฒนาและดำเนินการ (Production & Operation)
11. ลงมือพัฒนาเว็บ
12. เปิดเว็บไซท์
13. ดูแลและพัฒนาต่อเนื่อง
12. เปิดเว็บไซท์
13. ดูแลและพัฒนาต่อเนื่อง
• สิ่งที่ได้รับ
1. เว็บที่สมบูรณ์
2. เปิดตัวเว็บและทำให้เป็นที่รู้จัก
3. แนวทางการดูแลและพัฒนาต่อไป
2. เปิดตัวเว็บและทำให้เป็นที่รู้จัก
3. แนวทางการดูแลและพัฒนาต่อไป
การจัดรูปแบบข้อความและการไส่รูปภาพ
การจัดรูปแบบข้อความ
บทความนี้ก็ยังคงเกี่ยวข้องกับข้อความ เป็นบทความที่ต่อเนื่องมาจากบทความที่แล้ว ในบทความนี้เราจะมาจัดรูปแบบของข้ิอความ ในการทำเว็บส่วนใหญ่เนื้อหาจะเป็นส่วนสำคัญ ในบางครั้งเราต้องการที่จะเน้นที่ข้อความใดข้อความหนึ่ง เพื่อดึงดูดความสนใจ ซึ่งเราอาจจะเน้นข้อความนั้น ๆ เป็นพิเศษ ด้วยการใส่ตัวหนา ตัวเอียง การขีดเส้นใต้ข้อความ หรือการขีดฆ่า ในแท็กภาษา HTML ก็มีคำสั่งเหล่านี้อยู่ด้วยเหมือนกัน โดยรูปแบบของแท็ก มีดังนี้
บทความนี้ก็ยังคงเกี่ยวข้องกับข้อความ เป็นบทความที่ต่อเนื่องมาจากบทความที่แล้ว ในบทความนี้เราจะมาจัดรูปแบบของข้ิอความ ในการทำเว็บส่วนใหญ่เนื้อหาจะเป็นส่วนสำคัญ ในบางครั้งเราต้องการที่จะเน้นที่ข้อความใดข้อความหนึ่ง เพื่อดึงดูดความสนใจ ซึ่งเราอาจจะเน้นข้อความนั้น ๆ เป็นพิเศษ ด้วยการใส่ตัวหนา ตัวเอียง การขีดเส้นใต้ข้อความ หรือการขีดฆ่า ในแท็กภาษา HTML ก็มีคำสั่งเหล่านี้อยู่ด้วยเหมือนกัน โดยรูปแบบของแท็ก มีดังนี้
1. การกำหนดแบบตัวหนา (Bold) <b> ...ข้อความ...</b> หรือ <strong> ...ข้อความ...</strong>
2. การกำหนดแบบตัวเอียง (Italic) <i> ...ข้อความ...</i>
3. การกำหนดแบบตัวขีดเส้นใต้ (Underline) <u>...ข้อความ...</u>
4. การกำหนดแบบตัวขีดฆ่า (Strike) <strike>...ข้อความ...</strike>
3. การกำหนดแบบตัวขีดเส้นใต้ (Underline) <u>...ข้อความ...</u>
4. การกำหนดแบบตัวขีดฆ่า (Strike) <strike>...ข้อความ...</strike>
การใส่รูปภาพ
รูปแบบแท็กการใส่รูปภาพ <img src = "ชื่อภาพ">
รูปแบบแท็กการใส่รูปภาพ <img src = "ชื่อภาพ">
สำหรับแท็กการใส่รูปภาพ สามารถมี Attribute กำกับเพิ่มเติมได้้ ไม่ว่าจะเป็นขนาดความกว้าง ความสูงของรูปภาพว่าเราต้องการให้แสดงขนาดกว้างและสูง เท่าไหร่ ซึ่งหากเราไม่ได้ระบุภาพจะมีขนาดเท่าขนาดของภาพต้นฉบับ นอกจากนี้เรายังสามารถใส่ขอบของภาพได้ด้วย ซึ่ง Attribute มีดังนี้
ความกว้าง width="ตัวเลขระบุความกว้าง"
ความสูง height="ตัวเลขระบุความสูง"
เส้นขอบ border="ตัวเลขระบุความหนาของเส้นขอบ"
ความกว้าง width="ตัวเลขระบุความกว้าง"
ความสูง height="ตัวเลขระบุความสูง"
เส้นขอบ border="ตัวเลขระบุความหนาของเส้นขอบ"
การกำหนดพื้นหลังและสีของตัวอักษร
การปรับแต่งเอกสาร HTML การปรับแต่งเอกสารในที่นี้ จะหมายถึงการใส่สีสันให้กับเอกสาร HTML ในส่วนของการใส่พิ้นหลัง (Background) ให้โฮมเพจของเรามีสีสันเพิ่มขึ้น ซึ่งการใส่พื้นหลังให้โฮมเพจสามารถใส่ได้ 2 แบบ คือ การใส่สีให้พื้นหลัง และการใส่ภาพให้พื้นหลังในการใส่รูปแบบนั้นจะใส่เพิ่มในส่วนของแท็กเปิด ของแท็ก <body> เพราะคำสั่งนี้เป็นส่วนขยายที่เรียกว่า Attribute ของแท็ก <body> นั้นเอง โดยจะมีรูปแบบดังนี้
1. แบบใส่สีให้พื้นหลัง bgcolor = "ชื่อสี" หรือ bgcolor = "#รหัสสี"
2. แบบใส่ภาพให้พื้นหลัง background = "ชื่อภาพ"
การใส่ภาพในเอกสาร HTML
ซึ่งไฟล์ภาพที่เป็นมาตรฐานที่สามารนำมาใส่ในเว็บมีอยู่ด้วยกัน 3 ชนิด โดยแต่ละภาพก็มีลักษณะการนำมาใช้ที่แตกต่างกัน ดังนี้
1. GIF (Graphic Intechange Format)
1. GIF (Graphic Intechange Format)
ไฟล์ภาพชนิดนี้ นิยมใช้สำหรับภาพกราฟิคที่เป็นลักษณะลายเล้น ข้อความตัวอักษร หรือภาพการ์ตูนต่าง ๆ ซึ่งมีสีไม่มากนัก เพราะไฟล์ GIF มีค่าสีสูงสุดเีพียง 256 สี ดังนั้นทำให้ภาพกราฟิคที่เราเซฟเป็นไฟล์ประเภท GIF เป็นภาพที่มีลักษณะทึบ และไม่สามารถไล่เฉดสีได้มากนัก แต่ข้อดีของไฟล์ประเภทนี้คือ เราสามารถสร้างและเซฟภาพประเภทนี้ให้มีลักษณะพื้นหลังโปร่งใส (Transparent) ซึ่งสามารถนำภาพเหล่านี้ไปใช้กับพื้นหลังสีอะไรก็ได้ ไฟล์ภาพประเภทนี้มีไฟล์นามสกุลเป็น .gif
2. JPG (Joint Photographic Expert Group)
2. JPG (Joint Photographic Expert Group)
ไฟล์ประเภทนี้สามารถแสดงผลของสีได้สูงสุดถึง 16.7 ล้านสี ดังนั้นจึงเหมาะสำหรับภาพที่มีเฉดสีเยอะ เช่น ภาพถ่ายต่าง ๆ หรือภาพอื่น ๆ ที่มีสีเยอะ นอกจากนี้ยังสามารถเลือกที่จะบีบอัดไฟล์ภาพให้มีขนาดเล็กลงได้ แต่คุณภาพจะลดลง และ่ไฟล์ประเภทนี้ไม่สามารถทำเป็นแบบพื้นหลังโปร่งใส่ได้ ไฟล์ภาพประเภทนี้มีไฟล์นามสกุลเป็น .jpg และ.jpeg
3. PNG(Portable Network Graphic)
3. PNG(Portable Network Graphic)
ไฟล์ประเภทนี้จะมีให้เลือกเซฟ 2 แบบคือ แบบ PNG-8 ซึ่งสามารถแสดงผลสีได้สูงสุด 256 สี และยังสามารถเซฟเป็นแบบ PNG-24 ซึ่งสามารถแสดงผลสีได้สูงสุดถึง 16.7 ล้านสีเหมือนไฟล์ JPG นอกจากนี้ยังสามารถทำเป็นภาพพื้นหลังโปร่งใส เหมือนกับ GIF ได้ด้วย แต่ไฟล์ภาพประเภทนี้จะมีขนาดไฟล์ใหญ่กว่าภาพ JPG มาก ดังนั้นจึงมักใช้เซฟภาพซึ่งมีขนาดเล็ก ๆ แต่มีการใช้สีมาก เช่น ภาพไอคอน ต่าง ๆ ไฟล์ประเภทนี้มีนามสกุล .png
ปัจจัยหลักที่เกี่ยวข้องกับการท่องเว็บไซต์
เบราเซอร์ที่ใช้
ระบบปฏิบัติการของคอมพิวเตอร์
ความละเอียดของหน้าจอ
จำนวนสีที่จอผู้ใช้สามารถแสดง
ชนิดของตัวอักษรที่มีอยู่ในเครื่องของผู้ใช้
ความเร็วในการเชื่อมต่ออินเตอร์เน็ต
ขนาดหน้าต่างเบราเวอร์
ความสว่างและค่าความต่างของโทนสี
ระบบปฏิบัติการของคอมพิวเตอร์
ความละเอียดของหน้าจอ
จำนวนสีที่จอผู้ใช้สามารถแสดง
ชนิดของตัวอักษรที่มีอยู่ในเครื่องของผู้ใช้
ความเร็วในการเชื่อมต่ออินเตอร์เน็ต
ขนาดหน้าต่างเบราเวอร์
ความสว่างและค่าความต่างของโทนสี
บราเซอร์ที่ใช้
เบราเซอร์คือโปรแกรมที่ใช้เรียกดูเว็บเพจโดยสามารถแสดงผลได้ทั้งรูปแบบตัวอักษร,รูปภาพและภาพเคลื่อนไหวมีเบราเซอร์หลายชนิดที่ได้รับความนิยมเช่น
Internet Explorer
Netscape Navigator
The World
Opera
Mozilla
Firefox
การออกแบบเว็บไซต์ตามคุณสมบัติของเบราเซอร์
เว็บไซต์สำหรับเบราเซอร์ทุกชนิด
เว็บไซต์สำหรับเบราเซอร์รุ่นล่าสุด
เว็บไซต์ตามความสามารถของเบราเซอร์
เว็บไซต์ที่มีหลายรูปแบบ
ระบบปฏิบัติการ(Opreating System)
ระบบปฏิบัติการเป็นปัจจัยที่มีผลการทำงานต่อเบราเซอร์มากโดยแต่ระบบปฏิบัติการจะมีความแตกต่างกันในเรื่องของชนิดและรุ่นของเบราเซอร์ที่ใช้ได้,ระดับความละเอียดของหน้าจอ, ชุดสีของระบบและชนิดของตัวอักษรที่มาพร้อมกับระบบ เป็นต้น
การแสดงผลของ Windows จะมีขนาดใหญ่กว่า Mac เล็กน้อย
ความสว่างของหน้าจอบน Mac จะมากกว่า Windows และ Linux
ความละเอียดของหน้าจอ
การออกแบบควรใช้ความละเอียด800 x 600
ชนิดของตัวอักษรที่มีอยู่ในเครื่องของผู้ใช้
Ms Sans Serif VS Microsoft Sans Serif
Ms Sans Serif เป็นพ้อนต์ที่บิตแมท ที่ออกแบบจากจุดพิกเซล โดยมีการออกแบบขนาดที่แน่นอน
MicrosoftSans Serifเป็นพ้อนต์ที่มีโครงสร้างของอักขระเป็นแบบเวคเตอร์หรือลายเส้นโดยมีการออกแบบเอ้าไลน์ไว้แบบเดียวแต่ปรับขนาดได้ไม่จำกัด
ความเร็วในการเชื่อมต่ออินเตอร์เน็ต
ผู้ออกแบบเว็บไซต์ต้องออกแบบให้เว็บมีความสวยงาม น่าสนใจ และดาวน์โหลดได้เร็ว โดยทำให้ไฟล์มีขนาดเล็กที่สุด
การออกแบบให้เว็บเพจมีขนาดคงที่ (Fixed Design)
รูปแบบนี้เหมาะสมกับผู้ที่ต้องการควบคุมโครงสร้างของหน้าเว็บไซต์ให้คงที่เสมอ
ข้อดี
เว็บเพจจะปรากฎต่อสายตาผู้ใช้เป็นรูปแบบเดียวกันเสมอ
สามารถดูความยาวของตัวอักษรในบรรทัดได้ดี ตัวอักษรไม่ยาวเกินไป
ข้อเสีย
ต้องอาศัย Scroll Bar ในการเลื่อนดูข้อมูล
ไม่มีความคิดเห็น:
แสดงความคิดเห็น