การพัฒนาเว็บไซต์ มี ทั้งหมด กี่ รูป แบบ

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

สารบัญ Show

1. การระบุเป้าหมาย (Goal identification)
2. การกำหนดขอบเขต (Scope definition)
3. การสร้างแผนผังเว็บไซต์และโครงร่าง (Sitemap and wireframe creation)
4. การสร้างคอนเทนต์ (Content creation)
5. องค์ประกอบศิลป์ (Visual Element)
6. การทดสอบ (Testing)
7. เปิดตัว (Launch)

จากการศึกษาเว็บไซต์ของหน่วยงาน โดยเฉพาะหน่วยงานภาคการศึกษาและภาครัฐในประเทศไทย พบว่าเป็นการพัฒนาเว็บที่ยังตกหล่นประเด็นสำคัญหลายประเด็น โดยเฉพาะการให้ข้อมูลแก่ Search Engine เพื่อเพิ่มมูลค่าการเข้าถึงดังคำแนะนำของ Google : Google Search engine optimization starter guide

ข้อมูลจำเป็นสำหรับการให้ข้อมูลเกี่ยวกับเว็บต่อ Search Engine เรียกว่า Web Metadata โดยจะต้องระบุผ่าน Tag พิเศษภายใน Head Section ดังนี้

ทั้งนี้ Meta Charset เดิมคือ <meta http-equiv=”content-type” content=”text/html; charset=UTF-8″> เป็นรูปแบบของ HTML 4.01 และใน HTML5 ได้ปรับให้ใช้ได้สะดวกขึ้น โดยระบุเพียง <meta charset=”UTF-8″>

สำหรับท่านที่ต้องการเครื่องมือช่วยตรวจสอบและแนะนำสามารถใช้บริการ http://www.submitexpress.com/analyzer/ ได้ครับ รวมทั้งสามารถดาวน์โหลดแม่แบบเอกสารเว็บแนะนำ Web Meta Tag

นอกจาก Web Meta Tag ข้างต้น ในปัจจุบัน Search Engine และเครื่องมือออนไลน์หลายตัวยังรองรับเมทาดาทาอีกชุด คือ DC หรือ Dublin Core โดยมีชุดคำสั่ง ดังนี้

แม่แบบเอกสารเว็บที่ระบุ Dublin Core Metadata

ซึ่ง Web Meta Tag และ DC Metadata สามารถใส่รวมกันในเอกสารเว็บได้ ดังนั้น ผู้ดูแลเว็บ ลองตรวจสอบข้อมูลดังกล่าวจาก Source code ของเว็บท่านแต่ละหน้าดูนะครับ ว่าได้ระบุแล้วหรือไม่อย่างไร

เมื่อเราทำการอัพโหลดไฟล์เว็บไซต์ของเราขึ้นบนเว็บไซต์ที่ให้บริการพื้นที่ฝากเว็บแล้ว เราสามารถเปิดดูเว็บไซต์ของเราผ่านโปรแกรมเว็บบราวเซอร์ เช่น Internet Explorer, Mozilla Firefox, Google Chrome เป็นต้น โดยการพิมพ์ที่อยู่เว็บไซต์ตรง

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

ผู้พัฒนาเว็บไซต์(website)ส่วนใหญ่ มักคิดถึงกระบวนการออกแบบเว็บไซต์ที่เน้นเรื่องของเทคนิค เช่น โครงสร้างเว็บไซต์ (Site Structure) การเขียนโค้ด (Coding) การจัดการเนื้อหา แต่ความจริงแล้ว การพัฒนาเว็บไซต์ หัวใจอยู่ที่ขั้นตอนของการรวบรวมข้อมูลเบื้องต้น

การวางแผนโดยละเอียด และ การปรับปรุงและพัฒนาอย่างต่อเนื่องหลังจากเผยแพร่เว็บไซต์แล้ว ในบทความนี้ เราจะมาดูกันว่า การพัฒนาเว็บไซต์ ทั่วไปเป็นอย่างไร

ขั้นตอนการออกแบบเว็บไซต์มีทั้งหมด 7 ขั้นตอน มีดังนี้

1. การระบุเป้าหมาย (Goal identification)

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

การระบุเป้าหมายเป็นส่วนที่สำคัญที่สุดในการพัฒนาเว็บไซต์ เพราะการกำหนดเป้าหมายจะเป็นแนวทางในการออกแบบเว็บไซต์ให้เข้าถึงเป้าหมายได้

2. การกำหนดขอบเขต (Scope definition)

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

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

โดยมีลำดับขั้นตอน ดังนี้

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

3. การสร้างแผนผังเว็บไซต์และโครงร่าง (Sitemap and wireframe creation)

แผนผังเว็บไซต์ คือ รายการที่รวมหน้าเพจภายในเว็บไซต์ มีหลักการทำงานเหมือนเป็นสารบัญของเว็บไซต์ ช่วยให้ผู้ใช้งานเข้ามาดูได้ว่าในเว็บไซต์ของเรานั้นมีหน้าเพจอะไรบ้าง มีลำดับชั้นอย่างไร ในอดีตการทำแผนผังเว็บไซต์ จะทำเพื่อให้ผู้ใช้งานเข้าใจภาพรวมของเว็บไซต์ แต่ในปัจจุบันนั้นเกี่ยวข้องกับการทำ SEO (Search Engine Optimization)

Wireframe คือ แผนผัง โครงสร้าง ภาพรวม พิมพ์เขียว การจัดองค์ประกอบของ Interface บางครั้งอาจเรียกว่า Mockup

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

การออกแบบ Wireframe สามารถออกแบบด้วยการเขียนบนกระดาษ ออกแบบจากซอฟต์แวร์(ระบบคอมพิวเตอร์ มีองค์ประกอบอะไรบ้าง) (Software)คอมพิวเตอร์ หรือ เลือกใช้ เว็บแอปพลิเคชั่น Web Application ได้ดังนี้ ซึ่งมีทั้งแบบฟรีและมีค่าใช้จ่าย

ตัวอย่างเครื่องมือที่จะใช้ในการออกแบบ wireframe เช่น

เครื่องมือออกแบบออนไลน์ : Cacoo, Jumpchart, FrameBox, iPlotz, MockFlow, Google Docs
เครื่องมือออกแบบออฟไลน์ : Microsoft Visio, OmniGraffle, Adobe Photoshop, Adobe Firework, Pencil Project, Justinmind

4. การสร้างคอนเทนต์ (Content creation)

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

วัตถุประสงค์ของการสร้างคอนเทนต์ ได้แก่

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

5. องค์ประกอบศิลป์ (Visual Element)

องค์ประกอบศิลป์เป็นส่วนสำคัญของศิลปะและการออกแบบ มีองค์ประกอบภาพทั้งหมด 7 องค์ประกอบ ได้แก่ เส้น รูปร่าง สี มูลค่า รูปแบบ พื้นผิว และพื้นที่

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

ความเป็นสี (Hue)
น้ำหนักของสี (Value)
ความจัดของสี (Intensity)

ลักษณะพื้นผิว มี 2 ลักษณะได้แก่ ลักษณะของผิวที่จับต้องได้ และผิวที่ทำเทียมขึ้น

6. การทดสอบ (Testing)

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

7. เปิดตัว (Launch)

เมื่อทุกอย่างได้รับการทดสอบอย่างละเอียด และพร้อมที่จะเผยแพร่เว็บไซต์ ในขั้นตอนนี้หลังจากเปิดตัวเว็บไซต์แล้ว ผู้พัฒนาก็ต้องศึกษาและพัฒนาเว็บไปต่อเนื่อง เพราะอาจยังมีองค์ประกอบบางอย่างที่ต้องแก้ไข การพัฒนาเว็บไซต์ เป็นกระบวนการที่ต้องพัฒนาอย่างต่อเนื่อง

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