Differences

This shows you the differences between the selected revision and the current version of the page.


oss:nvu:web-development 2008/12/11 14:19 oss:nvu:web-development 2008/12/11 14:29 current
Line 1: Line 1:
-> [[oss:start|OSS & Freeware]]+> [[oss:start|OSS & Freeware]] > [[oss:nvu:start|NVU]]
-====== ออกแบบเว็บด้วย NVU Web Generator ======+====== เตรียมการก่อนพัฒนาเว็บไซต์ ======
-ซอฟต์แวร์ออกแบบพัฒนาเว็บไซต์ในปัจจุบัน ได้พัฒนามาสู่ยุคการพัฒนาเว็บในฟังก์ชัน Generator ผู้พัฒนาไม่จำเป็นต้องมีความรู้ภาษา HTML ซอฟต์แวร์นั้นๆ จะอำนวยความสะดวก +การพัฒนาเว็บเพจที่ดี ควรมีการวางแผนก่อนเสมอ เพื่อให้การแสดงผลเว็บถูกต้องตรงกับความต้องการ เพราะขบวนการพัฒนาเว็บเพจ จะต้องเกี่ยวข้องกับระบบปฏิบัติการหลายระบบ กล่าวคือ ขณะที่สร้างเอกสารเว็บ ผู้พัฒนาอาจจะใช้คอมพิวเตอร์ที่มีระบบปฏิบัติการ MS Windows แต่หลังจากที่พัฒนาเสร็จแล้วจะต้องโอนเอกสารเว็บไปเก็บไว้ในเครื่องบริการเว็บ (Web Server) ซึ่งมักจะเป็นเครื่องที่ใช้ระบบปฏิบัติการ UNIX หรือไม่ก็ Windows 2000 เอกสารเว็บที่โอนไปยังเครื่องบริการเว็บนี้ อาจจะถูกเรียกดูจากคอมพิวเตอร์ระบบอื่นๆ เช่น Macintosh ซึ่งใช้ระบบปฏิบัติการ System 7 จะเห็นได้ว่าเอกสารเว็บจะต้องเกี่ยวข้องกับระบบปฏิบัติการหลายระบบ ดังนั้นการพัฒนาเว็บเพจต้องคำนึงถึงสิ่งเหล่านี้ด้วย
-โดยมีปุ่มเครื่องมือ คำสั่งที่จำเป็นและแปลงเป็นรหัสภาษา HTML โดยอัตโนมัติ NVU นับเป็น Open Source Software ที่อำนวยความสะดวกต่อการออกแบบพัฒนาเว็บ เนื่องจากตัวโปรแกรม +
-มีฟังก์ชันการทำงานทั้งเป็น Generator หรือผู้พัฒนาอยากจะลงรหัส แก้ไขรหัสภาษา HTML ก็เข้าสู่โหมดการทำงาน HTML Editor รวมทั้งการแสดงผลเว็บตัวอย่างผ่านส่วน Web Preview +
-การติดตั้งทำได้ง่ายสะดวกลักษณะเดียวกับโปรแกรมอื่นๆ ในระบบวินโดวส์ เมื่อติดตั้งแล้วจะปรากฏเมนูคำสั่ง คือ Start, Program, Nvu, Nvu และไอคอนใช้งานบน Desktop เมื่อเรียกใช้งานโปรแกรมจะปรากฏหน้าต่างโปรแกรม ดังนี้+===== กำหนดโครงร่างของเว็บ =====
-{{:oss:nvu:image322.png|}}+การกำหนดโครงร่างของเว็บ เป็นขั้นตอนสำคัญขั้นแรกก็ว่าได้ เพราะเอกสารเว็บที่สร้างจะเพิ่มจำนวนเรื่อยๆ และมีจุดลิงก์ (Link) จำนวนมาก หากไม่มีการวางแผนไว้ก่อน จะทำให้การปรับปรุง แก้ไขเกิดปัญหาได้ ปัญหาที่ประสบแน่นอนคือ ลืมว่าไฟล์ที่เคยสร้างไว้แล้วมีชื่ออะไรบ้าง ซึ่งจะส่งผลให้การทำจุดลิงก์เกิดปัญหาตามไปด้วย เพราะไฟล์เหล่านี้อาจจะทิ้งช่วงเวลานาน จึงจะปรับปรุงอีกครั้ง วิธีการที่ดีที่สุดเพื่อป้องกันปัญหาดังกล่าว ควรวางแผนออกแบบเอกสารเว็บบนกระดาษ และกำหนดชื่อไฟล์ของเอกสารเว็บแต่ละไฟล์ จากขั้นตอนนี้จะทำให้ผู้พัฒนาสามารถมองเห็นภาพการไหล (Data Flow) ของเอกสารเว็บได้ชัดเจน และพิจารณาต่อได้ว่าเอกสารเว็บแต่ละไฟล์มีความสัมพันธ์กับเอกสารอื่นๆ อย่างไร และสัมพันธ์กับไฟล์เอกสารใดบ้าง
-  * [[oss:nvu:web-development|การพัฒนาเว็บไซต์]]+เนื่องจากขั้นตอนนี้จะเกี่ยวข้องกับการการกำหนดชื่อไฟล์ และนามสกุลของไฟล์เอกสารเว็บ โดยเอกสารเว็บจะมีข้อกำหนดที่แตกต่างไปจากการกำหนดชื่อไฟล์ปกติทั่วไป คือ
 +  * ชื่อไฟล์และนามสกุลของไฟล์เอกสารเว็บ จะถูกควบคุมจาก Web Administrator โดยผู้พัฒนาต้องสอบถามกฎการตั้งชื่อโดยละเอียด มีหลักคร่าวๆ ดังนี้
 +    * ควรใช้ตัวอักษร a – z หรือตัวเลข 0 – 9 หรือผสมกัน
 +    * ตัวอักษร a – z ควรเป็นตัวพิมพ์เล็ก
 +    * ห้ามเว้นวรรคและห้ามใช้เครื่องหมายอื่นใด ยกเว้น Dash (ขีดกลาง)
 +    * ชื่อไฟล์แรกของเอกสารเว็บ มักจะใช้ชื่อ index
 +  * นามสกุลของเอกสารเว็บ มีสองรูปแบบ คือ .htm และ html ดังนั้นผู้พัฒนาควรสอบถามจาก Web Administrator ก่อนว่าเครื่องบริการเว็บที่ใช้เก็บเอกสารเว็บ รู้จักนามสกุลไฟล์รูปแบบใด หมายเหตุ แนะนำให้ใช้นามสกุลเป็น .html เพื่อให้เป็นมาตรฐานเดียวกัน
 +
 +นอกจากนี้ยังจะต้องพิจารณาถึงลักษณะหน้าเว็บ, ลักษณะของสีพื้น, สีอักษรและสีของจุดลิงก์ (Links) ด้วย โดยสามารถร่างหน้าเว็บคร่าวๆ เพื่อให้เห็นภาพโดยรวมก่อนสร้างงานจริง รวมทั้งการใช้สีของหน้าเว็บ ควรใช้สีที่อ่านง่าย สบายตา และมีลักษณะร่วมกันในทุกๆ หน้าเว็บไม่ควรเปลี่ยนสีพื้นให้ฉูดฉาด รวมทั้งศึกษาหน้าเว็บไซต์ที่มีการพัฒนาในเครือข่ายเพื่อเป็นแนวทางในการออกแบบ
 +
 +ขั้นตอนนี้สามารถทำได้ง่ายๆ โดยการเข้าไปยังเว็บไซต์ต่างๆ แล้วบันทึกข้อมูลเกี่ยวกับเว็บไซต์ที่ชอบ เช่น ลักษณะการออกแบบกราฟิก การจัดวางเนื้อหา (Layout) ข้อมูลเกี่ยวกับสีพื้นสีกราฟิก สีตัวอักษร สีจุดลิงก์ต่างๆ นอกจากนี้ยังจำเป็นต้องอ่านข้อมูลเกี่ยวกับการพัฒนาเว็บไซต์จากแหล่งข้อมูลอื่นๆ ประกอบอย่างสม่ำเสมอ เนื่องจากเทคโนโลยีเว็บเป็นเทคโนโลยีที่เปลี่ยนแปลงอย่างรวดเร็ว
 +
 +===== กำหนดโฟลเดอร์ (Folder) =====
 +
 +การกำหนดโฟลเดอร์ก่อนที่จะสร้างเว็บไซต์ เป็นลำดับขั้นตอนที่ควรปฏิบัติด้วยทุกครั้ง เพื่อให้เอกสารเว็บแต่ละชุด มีระบบการจัดเก็บที่เป็นระบบ สามารถค้นหา และเรียกใช้งานได้สะดวก เนื่องจากการสร้างเว็บไซต์ จะมีไฟล์ต่างๆ จำนวนมาก ทั้งไฟล์เอกสาร HTML, ไฟล์ภาพกราฟิก, ไฟล์เสียง, ไฟล์วีดิทัศน์ และอื่นๆ ที่เกี่ยวข้อง ไฟล์ทั้งหมดนี้ ควรจัดเก็บไว้ในที่ที่เดียวกัน อาจจะสร้างโฟลเดอร์ย่อยเพื่อแยกกลุ่มไฟล์ได้ แต่จะต้องสร้างภายใต้โฟลเดอร์หลักที่สร้างไว้ก่อนแล้ว ไม่ควรแยกไว้คนล่ะที่ เพราะจะทำให้การจัดการเว็บมีปัญหายุ่งยากได้ (การตั้งชื่อโฟลเดอร์ใช้หลักการเดียวกับชื่อไฟล์)
 +
 +===== สร้างภาพหรือจัดหาภาพที่เกี่ยวข้อง =====
 +
 +เอกสารเว็บต้องเกี่ยวข้องกับรูปภาพ และสื่ออื่นๆ ดังนั้นควรสร้างภาพ หรือจัดหาภาพ รวมทั้งสื่อที่ต้องการ แล้วคัดลอกมาไว้ในโฟลเดอร์ที่ได้จัดเตรียมไว้ เพื่อให้สะดวกในการเรียกใช้งาน และการบริหารเว็บไซต์ในอนาคต
 +
 +===== สร้างเอกสารประกอบ =====
 +
 +นอกจากภาพแล้ว อาจจะมีไฟล์ประกอบอื่นๆ เช่น Word, PowerPoint, PDF Document ก็จะต้องเตรียมไว้ในโฟลเดอร์ที่สร้างไว้ให้พร้อม โดยอาจจะสร้างเป็นโฟลเดอร์เฉพาะของแต่ละไฟล์ฟอร์แมต
 +
 +===== เลือกเครื่องแม่ข่ายและเทคโนโลยี =====
 +
 +การสร้างเว็บไซต์ในปัจจุบัน ย่อมหนีไม่พ้นความต้องการด้านโปรแกรมมิ่ง เช่น ต้องการตัวนับจำนวนการเข้าชมเว็บไซต์ (Counter) ต้องการกระดานข่าว (Web board) ต้องการสมุดเยี่ยม (Guestbook) หรือฟังก์ชันสูงๆ เช่น ระบบสมาชิก แต่นักพัฒนาเว็บไซต์มักจะลืมไปว่าระบบโปรแกรมบนเว็บ เป็นระบบที่สัมพันธ์กับระบบปฏิบัติการ ดังนั้นก่อนสร้างเว็บไซต์ ควรพิจารณาให้แน่นอนว่าเว็บที่พัฒนา จะนำไปเก็บไว้บน
 +
 +เครื่องแม่ข่ายที่ใช้ระบบปฏิบัติการใด เพราะหากเลือกผิดพลาด ก็จะทำให้เว็บนั้นมีปัญหาอีกมากมาย ดังนั้นการพิจารณาเลือกเครื่องแม่ข่าย และระบบปฏิบัติก่อนสร้างเว็บไซต์ จะช่วยให้เว็บไซต์นั้นไม่เกิดปัญหาตามมาทีหลัง เช่น รันโปรแกรมไม่ได้, มีปัญหาเรื่องการเรียกไฟล์ต่างๆ ซึ่งเป็นปัญหาที่นักพัฒนาเว็บมือใหม่เกือบทุกรายประสบ
 +
 +===== สร้างเอกสารเว็บ =====
 +
 +จากที่กล่าวไว้ว่าไฟล์เอกสาร HTML เป็นไฟล์ข้อความปกติ (Text File) ดังนั้นเพื่อให้โปรแกรมเบราว์เซอร์ทราบว่าไฟล์เอกสารนี้เป็นไฟล์เฉพาะ สำหรับกำหนดรูปแบบการแสดงผลผ่านอินเทอร์เน็ต จึงมีลักษณะเฉพาะของไฟล์เอกสารรูปแบบนี้คือ ในการจัดเก็บไฟล์ จะต้องกำหนดนามสกุล หรือส่วนขยายของไฟล์ (File Extension) เป็น .htm หรือ .html โดยข้อกำหนดเกี่ยวกับนามสกุลของไฟล์นี้ ขึ้นอยู่กับผู้บริหารเว็บ ดังนั้นก่อนสร้างเอกสาร HTML ควรสอบถามจากผู้บริหารเครือข่ายที่ท่านจะนำข้อมูลไปฝากไว้ก่อนว่าให้กำหนดนามสกุลของไฟล์อย่างไร
 +
 +นอกจากการกำหนดนามสกุลของไฟล์ ชื่อไฟล์ก็เป็นอีกส่วนหนึ่งที่ผู้พัฒนาต้องตระหนักด้วย เพราะผู้ให้บริการเผยแพร่ข้อมูล หรือผู้ดูแลระบบเครือข่าย อาจจะกำหนดชื่อไฟล์เอกสาร HTML แตกต่างกันออกไป
 +
 +การตั้งชื่อและนามสกุลของไฟล์ HTML เป็นภาษาไทย เป็นสิ่งที่ไม่ควรกระทำเป็นอย่างยิ่ง เพราะระบบปฏิบัติการหลายระบบไม่สนับสนุนภาษาไทย และควรใช้ตัวอักษรตัวพิมพ์เล็กในการกำหนดชื่อและนามสกุลของไฟล์ทุกครั้ง ป้องกันปัญหาการทำงานข้ามระบบปฏิบัติการ เนื่องจากระบบปฏิบัติการหลายระบบ โดยเฉพาะ UNIX จะเห็นตัวอักษรตัวพิมพ์ใหญ่ และตัวพิมพ์เล็กเป็นคนล่ะตัวกัน (Case-Sensitive)
 +
 +===== ตรวจสอบผลเอกสารเว็บ =====
 +
 +ขณะที่สร้างเอกสารเว็บ ควรตรวจสอบผลผ่านโปรแกรมแสดงผลเบราว์เซอร์หลายค่าย หลายรุ่น (หากทำได้) เพราะโปรแกรมเบราว์เซอร์แต่ละค่าย แต่ละรุ่น จะรู้จัก หรือให้ผลลัพธ์จากคำสั่ง HTML ไม่เหมือนกัน จะได้ทราบข้อบกพร่อง ข้อผิดพลาด และสามารถแก้ไขได้ทัน ก่อนที่จะส่งขึ้นไปแสดงผลจริงในระบบอินเทอร์เน็ต
 +
 +ข้อที่ควรคำนึงถึงในการทำเว็บเชิงพาณิชย์ก็คือ ภาษา HTML เป็นภาษาที่ยังไม่ตาย ยังมีการพัฒนาชุดคำสั่งใหม่ๆ อยู่เรื่อยๆ ดังนั้นอย่าพยายามไล่ตามเทคโนโลยีใหม่ๆ เหล่านี้ ควรพัฒนาเว็บเพจที่สามารถเรียกดูได้จากเบราว์เซอร์หลายๆ รุ่น หลายค่าย ดีกว่ายึดค่ายใด ค่ายหนึ่ง หรือรุ่นใด รุ่นหนึ่ง มิฉะนั้นอาจจะทำให้พลาดจากลูกค้าบางกลุ่มไปได้
 +
 +===== ส่งข้อมูลขึ้นเครื่องบริการเว็บ (Server) =====
 +
 +เมื่อได้พัฒนาเอกสารเว็บ และตรวจสอบผลได้ตามที่ต้องการแล้ว ก็สามารถโอนข้อมูลนั้นๆ ไปยังเครื่องบริการเว็บได้ โดยใช้โปรแกรมกลุ่มถ่ายโอนข้อมูล (FTP Software) เช่น FileZilla ก่อนโอนข้อมูล จะต้องขอสิทธิ์และพื้นที่จากผู้ดูแลระบบก่อนเสมอ และตลอดจนต้องสอบถามข้อมูลที่จำเป็นในการโอนข้อมูล เช่นชื่อบัญชีของผู้มีสิทธิ์ (Login Name / Account Name) รหัสผ่านของบัญชี (Password) เป็นต้น
---- ----

Personal Tools
Creative Commons License
STKS Online Learning โดย http://stks.or.th/wiki อนุญาตให้ใช้ได้ตาม สัญญาอนุญาตของครีเอทีฟคอมมอนส์แบบ แสดงที่มา-ไม่ใช้เพื่อการค้า-อนุญาตแบบเดียวกัน 3.0 ประเทศไทย.