วันอังคารที่ 20 มกราคม พ.ศ. 2558

ขั้นตอนการสร้างเว็บไซต์

ขั้นตอนการสร้างเว็บไซต์

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

2. เลือก Web hosting และจด Domain name
2.1 Web hosting คืออะไร
2.2 หลักการเลือก Web hosing
2.3 การจด Domain name
2.4 การตั้งชื่อ Domain name ที่ดี

3 ออกแบบเว็บไซต์
3.1 การออกแบบโครงสร้างเว็บไซต์ (Site Structure Design) คือ การจัดหมวดหมู่ และลำดับของเนื้อหา แล้วจัดทำเป็นแผนผังโครงสร้างเว็บไซต์ ซึ่งจะทำให้เรารู้ว่ามีเนื้อหาอะไรบ้างภายในเว็บไซต์ และแต่ละหน้าเว็บเพจนั้นมีการเชื่อมโยงกันอย่างไร
โครงสร้างเว็บไซต์ที่ดีจะช่วยให้ผู้ชมไม่สับสนและค้นหาข้อมูลที่ต้องการได้อย่างรวดเร็ว ไม่ควรเป็นลำดับที่ลึกหลายชั้นเกินไป เพราะผู้ใช้จะเบื่อเสียก่อน กว่าจะค้นหาเจอหน้าที่ต้องการ
3.2 การออกแบบระบบเนวิเกชั่น (Site Navigation Design) เป็นระบบนำทางที่จะนำผู้ชมไปยังหน้าต่างๆ ของเว็บไซต์ ให้สามารถเข้าถึงข้อมูลที่ต้องการได้อย่างรวดเร็ว และรู้ว่ากำลังอยู่ตรงไหนของเว็บไซต์
นอกจากนี้ยังใช้กำหนดบทบาทของผู้ใช้ซึ่งแบ่งเป็นกลุ่มๆ ได้ โดยผู้ใช้แต่ละกลุ่มจะสามารถเข้าถึงหน้าเว็บเพจได้อย่างมีขอบเขต ตามสิทธิที่วางไว้เท่านั้น
3.3 การออกแบบเว็บเพจ (Page Design)
เว็บเพจ (Web page) หมายถึง เอกสารที่สร้างขึ้นโดยในรูปแบบของ HTML หรือโปรแกรมการสร้างเว็บโดยเฉพาะ จะแสดงผลได้เฉพาะโปรแกรมบราวเซอร์ และต้องติดตั้งในเว็บเซอร์เวอร์เพื่อเข้าไปอ่านข้อมูลได้โดยผ่านระบบอินเทอร์เน็ต เว็บเพจจะมี 2 ลักษณะใหญ่คือ
             - เว็บเพจแบบหน้าเดียว (Single page) หรือแบบสั้น (Short page) หมายถึง เว็บเพจที่แสดงผลข้อมูลหรือเนื้อหาเพียงหน้าเดียวมีขนาดเท่ากับหน้าจอคอมพิวเตอร์พอดี หรือมีแถบเลื่อนลงมาด้านล่างสั้น ๆ หรือมีรูปแบบเป็นกรอบพอดีหน้าจอภาพ
             - เว็บเพจแบบแถบเลื่อน (Scroll page) หรือแบบยาว (Long page) หมายถึง เว็บเพจที่แสดงผลข้อมูลหรือเนื้อหาเป็นแนวยาวจากด้านบนลงมายังด้านล่างของหน้าจอภาพ โดยมีแถบเลื่อนอยู่ด้านข้างสำหรับเลื่อนหน้าจอภาพ เพื่อดูข้อมูลที่แสดงผลหน้าจอภาพ

การออกแบบโครงสร้างเว็บ
สิ่งที่ต้องพิจารณาในการสร้างเว็บเพื่อการศึกษาคือ โครงสร้างหลักของเว็บ เนื่องจากการจัดการข้อมูลเพื่อการเรียนการสอนมีความแตกต่างกัน กลุ่มผู้เรียนที่แตกต่างและเนื้อหาของเว็บแตกต่างกัน โครงสร้างของเว็บก็จะมีผลต่อการเรียนการสอนเช่นกัน (McCormack and Jones, 1998)
โครงสร้างของเว็บโดยพื้นฐานจะมี 2 ลักษณะคือ

      1. โครงสร้างเว็บแบบตื้น เป็นโครงสร้างเว็บในลักษณะที่มีการเชื่อมโยงจากหน้าแรกหรือหน้าที่หลักไปยังเนื้อหาโดยตรง โดยไม่มีเว็บเพจที่เป็นเนื้อหาเชื่อมโยงต่อไปอีกมากนัก สามารถกลับมายังหน้าแรกหรือหน้าหลักของของเว็บไซต์ได้ในทันที อาจจะมีการเชื่อมโยงของเนื้อหาต่อไปอีกบ้างแต่ไม่ต่อเนื่องเป็นลำดับลึกลงไปเหมือนกับโครงสร้างของเว็บแบบลึก โครงสร้างลักษณะนี้จึงเป็นโครงสร้างที่มีเนื้อหาแยกเป็นหน่วยย่อย ๆ หรือมีเนื้อหาเฉพาะเรื่องไม่เกี่ยวข้องกัน ทำให้ไม่ต้องเชื่อมโยงเว็บเพจต่อไปเรื่อย ๆ เว็บแบบตื้นอาจจะมีเนื้อหามากก็ได้ แต่ไม่เชื่อมโยงลึกลงไปอีก การออกแบบเว็บเพจอาจเป็นแบบหน้าเดียวสั้น ๆ หรือแบบแถบเลื่อนยาวลงไปมากก็ได้ เนื้อหาจบในหน้านั้นและไม่เชื่อมโยงไปอีก

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

การออกแบบเว็บไซต์ต้องคำนึงถึงองค์ประกอบต่าง ๆ ดังต่อไปนี้

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

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

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

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

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

6. แสดงผลได้อย่างรวดเร็ว (Rapid Output) หมายถึง เมื่อมีผู้ใช้งานเข้ามาใช้เว็บของเรานั้นเว็บเพจแต่ละหน้าควรจะปรากฏขึ้นมาบนจออย่างรวดเร็ว เพราะการที่เราสามารถทำให้ผู้ใช้ไม่ต้องรอนานนั้น จะทำให้ผู้ใช้รู้สึกกกกระตือรือร้นในการใช้เว็บและไม่เกิดความรู้สึกเบื่อหน่ายจนอาจส่งผลให้ปิดหน้าเว็บของเรา แล้วไปเข้าเว็บแห่งอื่นๆ ดังนั้น หากเราต้องการที่จะให้มีคนเข้าชมเว็บของเรามากๆ เราต้องหาจุดที่เหมาะสมระหว่างสิ่งที่จะใส่เข้าไปกับเวลาที่ผู้ใช้ต้องรอ โดยเฉพาะเว็บที่มีคนเข้ามาใช้มากๆ ยิ่งต้องให้ความสำคัญกับความเร็วในการแสดงผลของเว็บมากยิ่งขึ้น

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

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

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

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

4 ลงมือสร้างและทดสอบ

5. ประชาสัมพันธ์ให้เว็บไซต์เป็นที่รู้จัก


6. ดูแล และพัฒนาอย่างต่อเนื่อง

ที่มา : http://www.enjoyday.net/build-website-step.html


โครงสร้างของหน้าเว็บเพจ

โครงสร้างของหน้าเว็บเพจ   แบ่งออกเป็น 3 ส่วนหลักๆ คือ

1. ส่วนหัวของหน้า (Page Header)
เป็นส่วนที่อยู่ตอนบนสุดของหน้า และเป็นส่วนที่สำคัญที่สุดของหน้า เพราะเป็นส่วนที่ดึงดูดผู้ชมให้ติดตามเนื้อหาภายในเว็บไซต์  มักใส่ภาพกราฟิกเพื่อสร้างความประทับใจ  ส่วนใหญ่ประกอบด้วย
โลโก้ (Logo) เป็นสิ่งที่ควรมี ทำให้เว็บน่าเชื่อถือ
- ชื่อเว็บไซต์
- เมนูหลักหรือลิงค์ (Navigation Bar) เป็นจุดเชื่อมโยงไปสู่เนื้อหาของเว็บไซต์

2.ส่วนของเนื้อหา (Page Body)
เป็นส่วนที่อยู่ตอนกลางของหน้า ใช้แสดงข้อมูลเนื้อหาของเว็บไซต์  ซึ่งประกอบด้วยข้อความ, ตารางข้อมูล ภาพกราฟิก วีดีโอ และอื่นๆ และอาจมีเมนูหลัก หรือเมนูเฉพาะกลุ่ม
สำหรับส่วนเนื้อหาควรแสดงใจความสำคัญที่เป็นหัวเรื่องไว้บนสุด ข้อมูลมีความกระชับ ใช้รูปแบบตัวอักษรที่อ่านง่าย และจัด Layout ให้เหมาะสมและเป็นระเบียบ

3. ส่วนท้ายของหน้า (Page Footer)

เป็นส่วนที่อยู่ด้านล่างสุดของหน้า จะมีหรือไม่มีก็ได้  มักวางระบบนำทางที่เป็นลิงค์ข้อความง่าย ๆ และอาจแสดงข้อมูลเพิ่มเติมเกี่ยวกับเนื้อหาภายในเว็บไซต์ เช่น เจ้าของเว็บไซต์, ข้อความแสดงลิขสิทธิ์, วิธีการติดต่อกับผู้ดูแลเว็บไซต์, คำแนะนำการใช้เว็บไซต์ 


ตัวอย่าง แสดงส่วนประกอบของหน้าเว็บเพจ (trendypet.com)













ที่มา : http://www.enjoyday.net/page-structure.html