กกกกกกกกกกกกกกกกกกกกก (WEB PROGRAMMING) กกกกก 2 กกกกกกกกกกกกกกกก กกกกกกกกกกกกก กกกกกกกกกกกกกกกกกกกกกกกกก กกกก HTML กกก ก.กกกกกก กกกกกกกกกก กกกกกกกกกกกกกกกกกกกกกกกกกก กกกกกกกกกกกกกกกกกกกกกกกกกกกกก
Feb 14, 2016
การเขยนโปรแกรมบนเวบ(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