Transcript web programming

การเขียนโปรแกรมบนเว็บ
(WEB PROGRAMMING)
บทที่ 2 หลักการออกแบบและพัฒนาเว็บไซต์
ความรูเ้ บื้องต้นเกี่ยวกับภาษา HTML
โดย อ.ปริญญา น้อยดอนไพร
คณะวิทยาศาสตร์และเทคโนโลยี
มหาวิทยาลัยราชภัฏสุราษฎร์ธานี
หลักการออกแบบและพัฒนาเว็บไซต์

กำหนดเป้ำหมำย และวำงแผน (Site Definition and Planning)
 วิเครำะห์ และจัดโครงสร้ำงข้อมูล (Analysis and Information Architecture)
 ออกแบบเว็บเพจ และเตรียมข้อมูล (Page Design and Content Editing)
 ลงมือสร้ำง และทดสอบ (Construction and Testing)
 เผยแพร่ และส่งเสริ มให้เป็ นที่รูจ้ กั (Publishing and Promotion)
 ดูแล และพัฒนำ (Maintenance and Innovation)
WEB PROGRAMMING:: Mr.Parinya Noidonphrai (www.freebsd.sru.ac.th)
กาหนดเป้าหมาย และวางแผน (SITE DEFINITION AND PLANNING)

กำหนดวัตถุประสงค์ของเว็บไซต์
 กำหนดกลุม
่ ผูช้ มเป้ำหมำย
 เตรียมแหล่งข้อมูล
 เตรียมทักษะหรื อบุ คลำกร
 เตรียมทรัพยำกรต่ำงๆ ที่จำเป็ น
WEB PROGRAMMING:: Mr.Parinya Noidonphrai (www.freebsd.sru.ac.th)
วิเคราะห์ และจัดโครงสร้างข้อมูล (ANALYSIS AND INFORMATION ARCHITECTURE)

แผนผังโครงสร้ำงของเว็บไซต์ สำรบัญ ลำดับกำรนำเสนอ หรื อผังงำน
 ระบบนำทำงหรื อเนวิเกชัน
่ (Navigation)
 องค์ประกอบที่จะนำมำใช้บนเว็บเพจ เช่น ภำพกรำฟิก เสียง วิดโี อ เป็ นต้น
 ข้อกำหนดเกี่ยวกับลักษณะหน้ำตำและรู ปแบบของเว็บเพจ
 ข้อกำหนดของโปรแกรมภำษำสคริ ปต์หรื อเว็บแอพพลิเคชัน
่ และฐำนข้อมูล
WEB PROGRAMMING:: Mr.Parinya Noidonphrai (www.freebsd.sru.ac.th)
ออกแบบเว็บเพจ และเตรียมข้อมูล (PAGE DESIGN AND CONTENT EDITING)

เป็นขัน้ ตอนของกำรออกแบบเค้ำโครง หน้ำตำ และลักษณะทำงด้ำนกรำฟิกของ
หน้ำเว็บเพจ
 ผู พ้ ฒ
ั นำควรมีทกั ษะเพิ่มเติม สำมำรถใช้โปรแกรมทำงด้ำนกรำฟิก เช่น Adobe
Photoshop หรื อ Adobe Fireworks เป็นต้น
 ผู พ้ ฒ
ั นำควรมีทกั ษะเพิ่มเติม สำมำรถใช้โปรแกรมทำงด้ำนแอนิ เมชัน่ คือ Adobe
Flash CS3 หรื อ Macromedia Flash 8 เป็นต้น
 นอกจำกกรำฟิกและต้องคำนึ งถึงสีสน
ั และรู ปแบบของส่วนประกอบต่ำงๆ ที่ไม่ใช่
รู ปภำพ เช่น ฟอนต์ ขนำด และสีขอ้ ควำม สีพ้ ืนหลัง ลวดลำยของเส้นกรอบ
WEB PROGRAMMING:: Mr.Parinya Noidonphrai (www.freebsd.sru.ac.th)
ลงมือสร้าง และทดสอบ (CONSTRUCTION AND TESTING)

เป็นขัน้ ตอนที่เว็บเพจจะถูกสร้ำงขึ้นมำ โดยอำศัยเค้ำโครงและองค์ประกอบ
กรำฟิกตำมที่ได้ออกแบบไว้
 นำเนื้ อหำหรื อข้อมูลต่ำงๆ มำประกอบ
 กำหนดส่วนเชื่อมโยงเอกสำรต่ำงๆ หรื อระบบนำทำง
 เลือกใช้เครื่ องมือสำหรับกำรพัฒนำเว็บไซต์ เช่น Adobe Dreamweaver ,
Macromedia Dreamweaver เป็นต้น
WEB PROGRAMMING:: Mr.Parinya Noidonphrai (www.freebsd.sru.ac.th)
เผยแพร่ และส่งเสริมให้เป็ นที่รจู ้ กั (PUBLISHING AND PROMOTION)

โดยทัว่ ไปกำรนำเว็บไซต์ข้ ึนเผยแพร่บนระบบอินเทอร์เน็ต จะทำด้วยกำรอัพโหลด
ไฟล์ทงั้ หมด ขึ้นไปเก็บบนเว็บเซิรฟ์ เวอร์
 ใช้โปรแกรมสำหรับกำรอัพโหลด เช่น CuteFTP , SSH File Transfer เป็ นต้น
 หลังจำกนำข้อมู ลเผยแพร่แล้ว ควรมีกำรตรวจสอบหรื อทดสอบอีกครั้ง เพื่อ
ตรวจหำปั ญหำที่อำจเกิดขึ้น เช่น ลิงค์ตำ่ งๆ ที่เกี่ยวข้อง สคริ ปต์ และกำรติดต่อ
กับฐำนข้อมูล
 กำรโฆษณำเพื่อให้เว็บไซต์เป็ นที่รูจ้ กั เช่น กำรแลกเปลี่ยนลิงค์ ประกำศบนเว็บ
บอร์ดสำธำรณะ กำรส่งอีเมล์ สื่อสิ่งพิมพ์ตำ่ งๆ หรื อวิทยุ โทรทัศน์ เป็นต้น
WEB PROGRAMMING:: Mr.Parinya Noidonphrai (www.freebsd.sru.ac.th)
ดูแล และพัฒนา (MAINTENANCE AND INNOVATION)

เว็บไซต์ท่ เี ผยแพร่แล้วไม่ควรทิ้งขว้ำง ควรดูแลโดยตลอด
 มีกำรปรับเปลี่ยน หรื อเปลี่ยนแปลงหน้ำเว็บ หรื อเนื้ อหำต่ำงๆ ให้เป็ นข้อมูล
ปั จจุบนั
 ตรวจสอบกำรทำงำนของลิงค์ตำ่ งๆ ที่เกี่ยวข้อง
 มีกำรสำรองฐำนข้อมูลเป็ นระยะ
WEB PROGRAMMING:: Mr.Parinya Noidonphrai (www.freebsd.sru.ac.th)
ทีมงานพัฒนาเว็บไซต์

Web Master คือ ผูร้ ับผิดชอบและดูแลเว็บไซต์ในภำพรวมหรื ออำจจะมีหน้ำที่
ออกแบบและพัฒนำเว็บไซต์ทงั้ หมดก็ได้
 Web Designer คือ ผู อ้ อกแบบลักษณะหน้ำตำควำมสวยงำมของเว็บไซต์
ทัง้ หมด วำงแผนโครงร่ำงของหน้ำเว็บเพจ กำรเลือกสี กำรออกแบบกรำฟิก
 Web Programmer คือ นักเขียนโปรแกรมซึ่งมีควำมสำมำรถในกำรใช้ภำษำ
สำหรับกำรพัฒนำเว็บไซต์ เช่น JavaScript, VBScript, ASP.NET และ PHP
 Content Writer/Editor คือ นักเขียนและบรรณำธิกำรที่ดูแลด้ำนเนื้ อหำของ
เว็บไซต์ เป็นผูร้ ับผิดชอบในกำรจัดเตรียมเนื้ อหำ ตรวจสอบควำมถูกต้อง และ
ปรับปรุ งเมื่อมีกำรเปลี่ยนแปลง
WEB PROGRAMMING:: Mr.Parinya Noidonphrai (www.freebsd.sru.ac.th)
เนื้ อหาที่ควรมีในเว็บไซต์

ข้อมูลเกี่ยวกับบริ ษทั องค์กร หรื อผูจ้ ดั ทำ (About Us)
 รำยละเอียดของผลิตภัณฑ์หรื อบริ กำร (Product/Service Information)
 ข่ำวสำร (News/Press Release)
 คำถำม/คำตอบ (Frequently Asked Question)
 ข้อมูลในกำรติดต่อ (Contact Information)
WEB PROGRAMMING:: Mr.Parinya Noidonphrai (www.freebsd.sru.ac.th)
ส่วนประกอบของหน้าเว็บเพจ

ส่วนหัว (Page Header) อยูบ่ นสุ ดของหน้ำ เป็นบริ เวณที่สำคัญที่สุด เพรำะ
ผูใ้ ช้จะมองเห็นก่อนบริ เวณอื่น ส่วนใหม่นิยมใช้วำงโลโก้ หรื อป้ำยโฆษณำ
 ส่วนของเนื้ อหา (Page Body) อยูต
่ อนกลำงของหน้ำ ใช้แสดงเนื้ อหำของเว็บ
เพจ ประกอบไปด้วย ข้อควำม ภำพกรำฟิก ตำรำงข้อมูล และอื่นๆ
 ส่วนท้าย (Page Footer) อยูด่ ำ้ นล่ำงสุ ดของหน้ำ ส่วนใหญ่นิยมใช้วำงระบบนำ
ทำงแบบที่เป็นลิงค์ขอ้ ควำมง่ำยๆ หรื อ นิ ยมใช้บอกชื่อเจ้ำของ ผู พ้ ฒั นำ ลิขสิทธิ์ ที่
อยูข่ องหน่วยงำน และอีเมล์ เป็นต้น
 แถบข้าง (Side Bar) ในปั จจุบน
ั นิ ยมออกแบบด้ำนข้ำงของเว็บเพจให้น่ำสนใจ
เพื่อใช้วำงป้ำยแบนเนอร์ หรื อลิงค์แนะนำเกี่ยวกับบริ กำรของเว็บไซต์ เป็นต้น
WEB PROGRAMMING:: Mr.Parinya Noidonphrai (www.freebsd.sru.ac.th)
WEB PROGRAMMING:: Mr.Parinya Noidonphrai (www.freebsd.sru.ac.th)