กระบวนการพัฒนา เอกสารเว็บเพจ เอกสารประกอบคำบรรยายวิชา 310101 คอมพิวเตอร์ และ อินเทอร์เน็ต ภาควิชาวิทยาการคอมพิวเตอร์ มหาวิทยาลัยบูรพา
การสร้างเอกสารเว็บเพจ ภาษาที่ใช้สร้างเอกสาร กระบวนการพัฒนาเอกสาร HTML
Web Publishing การสร้างเอกสารสำหรับอ่านด้วยคอมพิวเตอร์ โดยไม่ต้องทำเป็นรูปเล่ม หรือพิมพ์ลงบนกระดาษ เป็นเอกสารแบบ Interactive แสดงข้อมูลที่เป็นภาพเคลื่อนไหวและมีเสียงได้ เอกสารบน Web แยกเก็บเป็นไฟล์ เรียกแต่ละหน้าว่า Web Page หน้าแรกเรียกว่า Home Page Homepage ทำหน้าที่เสมือนปกหนังสือและหน้าสารบัญ
เอกสารเว็บเพจ เอกสารอิเล็กทรอนิกส์ที่เผยแพร่ทาง www มีลักษณะเฉพาะคือ ผู้ใช้บริการสามารถควบคุมการโต้ตอบกับเอกสารที่นำเสนอได้ด้วยตนเอง ความสามารถในการเชื่อมโยง (link) ข้อมูลต่างๆ บน Internet เข้าไว้ด้วยกัน
HyperText ข้อความตัวอักษร ที่สามารถเชื่อมโยงไปยังเอกสารอื่นๆ จุดเชื่อมโยงเอกสารที่ใช้คุณสมบัติของ HyperText เรียกว่า HyperLink คุณสมบัติที่ข้อความสามารถที่เชื่อมโยงไปยังสื่อผสมต่างๆ เช่น ข้อความ ภาพนิ่ง ภาพเคลื่อนไหว และเสียง เรียกว่า Hypermedia
ตัวอย่าง HyperText
ภาษาหลักที่ใช้สร้างเว็บเพจ เทคโนโลยีหลักของการสร้างเอกสารเว็บ กำหนดโดย W3C ได้แก่ HTML (HyperText Markup Language) CSS (Cascading Style Sheet) XML (eXtensible Markup Language) XTML (eXtensible HyperText Markup Language) XSL (eXtensible Style Language)
ภาษา HTML HyperText Markup Language กำหนดรูปแบบการแสดงผลในเอกสารเว็บเพจโดยใช้คำสั่ง (Tag) เว็บบราวเซอร์แปลความหมายของ Tag และแสดงผลข้อมูล ตาม Tag ที่ได้กำหนดไว้ล่วงหน้า อาจเรียกเอกสารเว็บเพจที่สร้างโดยใช้ภาษา HTML ได้ว่าเอกสาร HTML
เอกสาร HTML แฟ้ม HTML เป็นเอกสารประเภท Text ประกอบด้วย ข้อความที่ต้องการแสดงผล คำสั่งควบคุมการแสดงผลข้อความ เรียกว่า Tag เขียนอยู่ภายในเครื่องหมาย < และ > ส่วนชื่อและส่วนขยายของ Tag ที่เขียนอยู่ระหว่างเครื่องหมาย < >
ตัวอย่างเอกสาร HTML <html> <head> <title> A simple HTML document </title> </head> <body> Welcome to the world of <b>HTML</b>. <br> HTML is not difficult to learn. </body> </html>
กระบวนการพัฒนาเอกสาร HTML 1. กำหนดวัตถุประสงค์ของการเผยแพร่ (Define purpose) 2. กำหนดกลุ่มเป้าหมาย (Define audience) 3. เลือกเครื่องมือที่ใช้ในการพัฒนาเอกสาร (Choose an editor)
กระบวนการพัฒนาเอกสาร HTML 4. ออกแบบ (Making design decision) 5. สร้างเอกสาร (Create page) 6. ทดสอบเอกสาร (Test page) 7. เผยแพร่เอกสาร (Publish page)
1. กำหนดวัตถุประสงค์ กำหนดวัตถุประสงค์ของการเผยแพร่เอกสารให้ชัดเจน ช่วยกำหนดขอบเขตเบื้องต้นของเนื้อหาที่จะนำเสนอ
2. กำหนดกลุ่มเป้าหมาย กำหนดกลุ่มบุคคลที่จะเข้ามาเยี่ยมชม หรือใช้บริการ มีผลต่อการออกแบบเนื้อหา รูปแบบของเอกสาร ตลอดจนรูปภาพที่เหมาะสม กับวุฒิภาวะของผู้เข้าเยี่ยมชม
3. เลือกเครื่องมือพัฒนาเอกสาร เครื่องมือที่ใช้ในการสร้างเอกสาร HTML เครื่องมือในการพัฒนารูปภาพกราฟฟิก หรือภาพเคลื่อนไหว เครื่องมือในการพัฒนาภาษาอื่น ๆ ที่ต้องการใช้ร่วมกับ HTML
เครื่องมือพัฒนาเอกสาร HTML โปรแกรมบรรณาธิกรจัดการเอกสารข้อความ (Text Editor) โปรแกรมประมวลผลคำ (Word Processing Program) โปรแกรมบรรณาธิกรสำหรับจัดการเอกสาร HTML (HTML Editor) โปรแกรมช่วยสร้างเอกสารเว็บเพจ (Authoring Tool) โปรแกรมจัดการเว็บไซต์ (Site Mangers)
โปรแกรม Text Editor โปรแกรมจัดการเอกสารที่เป็นข้อความ ตัวอย่างโปรแกรม ได้แก่ Notepad (Windows) SimpleText (Macs) vi และ pico (unix)
โปรแกรม Word Processing บางโปรแกรมใช้ในการสร้าง แก้ไข บันทึกเอกสารในรูปแบบ HTML ได้ อาจไม่เหมาะสม กับการสร้างเอกสาร HTML เนื่องจากบางโปรแกรม อาจบันทึกเอกสารในรูปแบบที่ไม่เป็นมาตรฐาน ตัวอย่างเช่น โปรแกรม Word2000
โปรแกรม HTML Editor รวมความสามารถของ Text Editor เข้ากับ การจัดการรูปแบบที่เอื้ออำนวยต่อการสร้างเอกสาร HTML มีการตรวจสอบความถูกต้องของ Tag และมีส่วนช่วยเหลือ เช่น BBEdit (Macs)
BBEdit
โปรแกรม Authoring Tool WYSIWYG (What You See Is What You Get) สร้างเอกสาร HTML ได้โดยไม่ต้องพิมพ์ Tag เห็นเอกสารที่สร้าง ได้ลักษณะเดียวกับที่แสดงผลผ่านเว็บบราวเซอร์ เช่น โปรแกรม Microsoft Frontpage Express (Windows)
Frontpage Express
โปรแกรม Site Managers รวมความสามารถของโปรแกรมหลายประเภทเข้าด้วยกัน มีส่วนช่วยสร้างเอกสาร มีส่วนช่วยจัดการเอกสารหลากหลายรูปแบบนอกจาก HTML มีส่วนช่วยถ่ายโอนเอกสารไปเก็บเครื่องให้บริการ
โปรแกรม Site Managers ตัวอย่างโปรแกรม NetObjects Fusion (Macs และ Windows) Macromedia Dreamweaver Ultradev (Windows) Amaya พัฒนาโดย W3C จัดเป็นโปรแกรม Open Source
Dreamweaver
Dreamweaver
4. ออกแบบ ออกแบบเอกสาร HTML โดย เลือกหน้าตาของการนำเสนอเอกสาร เช่นสี รูปภาพในเอกสาร เลือกรูปแบบ และวิธีการนำเสนอเนื้อหาให้เหมาะสม เช่น ความยาวของเนื้อหา การเชื่อมโยงเนื้อหา การแสดงผลเนื้อหา เป็นต้น
4. ออกแบบ ออกแบบโครงสร้างข้อมูลของเว็บไซต์ จัดกลุ่มของข้อมูลที่จะนำเสนอแยกตามหัวข้อ จัดลำดับความสำคัญของหัวข้อที่นำเสนอ
5. สร้างเอกสาร ออกแบบโครงสร้างข้อมูลของเว็บไซต์ จัดกลุ่มของข้อมูลที่จะนำเสนอแยกตามหัวข้อ จัดลำดับความสำคัญของหัวข้อที่นำเสนอ จัดรูปแบบความสัมพันธ์ของข้อมูล
6. ทดสอบเอกสาร ทดสอบโดย เปิดเอกสารโดยใช้โปรแกรมประเภทเว็บบราวเซอร์ ควรใช้เว็บบราวเซอร์มากกว่า 1 โปรแกรมในการทดสอบ หากแสดงผลลัพธ์ไม่ถูกต้องควรทำการแก้ไขเอกสาร
7. เผยแพร่เอกสาร ต้องมีเนื้อที่เก็บเอกสารบนเครื่องให้บริการ และเครื่องให้บริการมีโปรแกรมเว็บเซิร์ฟเวอร์ให้บริการ ปัจจุบัน มีบริการฟรีสำหรับเนื้อที่เก็บเอกสาร และโปรแกรมเว็บเซิร์ฟเวอร์ และบางแห่งให้บริการเช่าเนื้อที่สำหรับเก็บเอกสารเว็บเพจ
นิสิตมหาวิทยาลัยบูรพา สร้าง และเก็บเอกสาร HTML รวมทั้งเอกสารอื่นๆ ไว้ที่เครื่อง student.buu.ac.th หากไม่ได้สร้างเอกสาร HTML บนเครื่องดังกล่าว เมื่อสร้างและทดสอบเรียบร้อยแล้ว ควรถ่ายโอนแฟ้มทั้งหมด โดยใช้บริการถ่ายโอนแฟ้มข้อมูล (FTP)
นิสิตมหาวิทยาลัยบูรพา เมื่อถ่ายโอนเรียบร้อยแล้ว ควรทำการทดสอบอีกครั้งโดยระบุ URL ในโปรแกรมเว็บบราวเซอร์ ตัวอย่าง URL http://student.buu.ac.th/ ~<username>
เอกสารอ้างอิง http://www.w3.org/ http://www.w3shcools.com/ Bryan Pfaffenberger. (2002), Computers in your future 2003., New Jersy , Prentice Hall. H.M Deitel, P.J. Deitel, T.R. Nieto, (2002), Internet & World Wide Web How to Program, Prentice Hall.