โดย อ.ปริญญา น้อยดอนไพร คณะวิทยาศาสตร์และเทคโนโลยี มหาวิทยาลัยราช

การเขยนโปรแกรมบนเวบ(WEB PROGRAMMING)

บทท 2 หลกการออกแบบและพฒนาเวบไซตความรเบองตนเกยวกบภาษา HTMLโดย อ.ปรญญา นอยดอนไพรคณะวทยาศาสตรและเทคโนโลยมหาวทยาลยราชภฏสราษฎรธาน

WEB PROGRAMMING:: Mr.Parinya Noidonphrai (www.freebsd.sru.ac.th)

หลกการออกแบบและพฒนาเวบไซต

กำ�หนดเป�หม�ย และว�งแผน (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)

Q/A