หลักการออกแบบเว็บเพจ
หลักการออกแบบเว็บเพจ การออกแบบและพัฒนาเว็บเพจ สามารถทำได้หลายระบบ ขึ้นอยู่กับลักษณะของข้อมูล ความชอบของผู้พัฒนา ตลอดจนกลุ่มเป้าหมายที่ต้องการนำเสนอ เช่น หากกลุ่มเป้าหมายเป็นเด็กวัยรุ่น และนำเสนอ ข้อมูลเกี่ยวกับความบันเทิง อาจจะออกแบบให้มีทิศทางการไหลของหน้าเว็บที่หลากหลายใช้ลูกเล่นได้มากกว่าเว็บ ที่นำเสนอให้กับผู้ใหญ่ หรือเว็บด้านวิชาการ ทั้งนี้หลักการออกแบบเว็บเพจ สามารถแบ่งได้สามลักษณะ คือ
แบบลำดับขั้น ( Hierarchy ) เป็นการจัดแสดงหน้าเว็บเรียงตามลำดับกิ่งก้าน แตกแขนงต่อเนื่องไปเหมือนต้นไม้กลับหัว เหมาะสำหรับการนำเสนอข้อมูล ที่มีการแบ่งเป็นหมวดหมู่ที่ไม่มากนัก และมีข้อมูลย่อยไม่ลึกมาก เช่นเว็บไซต์แนะนำ ประวัติส่วนตัว ที่มีข้อมูล 4 - 5 หน้าเป็นต้น
แบบเชิงเส้น ( Linear ) เป็นการจัดแสดงหน้าเว็บเรียงต่อเนื่องไปในทิศทางเดียว เหมาะสำหรับการนำเสนอข้อมูลที่เป็นรูปภาพ เช่นเว็บไซต์นำเสนอสไลด์จาก Microsoft PowerPoint
แบบผสม ( Combination ) เป็นการจัดหน้าเว็บชนิดผสมระหว่างแบบลำดับขั้น และแบบเชิงเส้น มักจะเป็นแบบที่นิยมใช้กันอย่างแพร่หลายในปัจจุบัน เนื่องจากสามารถควบคุมการนำเสนอและการเรียกดูได้สะดวก และรวดเร็ว
ขั้นตอนการพัฒนาเว็บเพจ
ขั้นตอนการพัฒนาเว็บเพจ เกี่ยวข้องกับระบบปฏิบัติการหลายระบบ การพัฒนาเว็บเพจที่ดีควรมีการวางแผนก่อนเสมอ เพื่อให้การ แสดงผลได้ถูกต้องตรงกับความต้องการเพราะขบวนการพัฒนาเว็บเพจจะต้องเกี่ยวข้องกับระบบปฏิบัติการ (Operating System:OS) หลายระบบ กล่าวคือขณะที่สร้างเอกสารเว็บเพจผู้พัฒนาอาจจะใช้คอมพิวเตอร์ที่มีระบบปฏิบัติการ ดอส (DOS) หรือระบบปฏิบัติการ Windows แต่หลังจากที่พัฒนาแล้วเสร็จจะต้องทำการโอนเอกสารเว็บไปเก็บไว้ในเครื่อง แม่ข่าย ซึ่งส่วนมากจะเป็นระบบปฏิบัติการ Unix หรือ Windows NT โดยเอกสารเว็บที่ทำการโอนไปยังเครื่องแม่ข่ายอาจจะถูกเรียกดูจากคอมพิวเตอร์ระบบอื่นๆ เช่น Macintosh เป็นต้น
จากความสัมพันธ์ดังกล่าว นักพัฒนาเว็บเพจจึงควรจะศึกษาถึงข้อกำหนดพื้นฐานที่ควรทราบก่อนอันได้แก่ การกำหนด ชื่อโฟลเดอร์ไฟล์เอกสารเว็บไฟล์ภาพกราฟิกตลอดจนไฟล์อื่นๆที่จะนำมาใช้ในการทำเว็บเพจเพราะระบบปฏิบัติการUNIX มีลักษณะการตั้งชื่อแบบ Case-Sensitive หมายถึง ตัวอักษรตัวพิมพ์ใหญ่และตัวพิมพ์เล็ก (A และ a) จะถือว่าเป็นตัวอักษร คนละตัวกัน ไม่เหมือนกับระบบปฏิบัติการ DOS หรือ Windows ที่ถือว่าเป็นตัวอักษรตัวเดียวกัน ดังนั้นหาก ผู้พัฒนาใช้ Windows เป็นระบบปฏิบัติการของเครื่องในการสร้างเอกสารเว็บ และกำหนดชื่อไฟล์ Index.htm แต่ขณะที่ป้อนคำสั่งเพื่อลิงก์ ไฟล์ผ่านแป้นพิมพ์เป็น index.html เมื่อโอนถ่ายเอกสารเว็บนั้นๆไปยังเครื่องแม่ข่ายที่ใช้ UNIX เป็นระบบปฏิบัติการจะเกิด
ปัญหาในการแสดงผลได้ เพราะระบบปฏิบัติการที่เครื่องแม่ข่ายจะเห็นเป็นไฟล์ที่แตกต่างกันเนื่องจากชื่อไฟล์ไม่ เหมือนกัน จากที่กล่าวมาข้างต้นขั้นตอนการพัฒนาเว็บเพจเพื่อให้ได้ผลลัพธ์ที่ถูกต้องและตรงกับความต้องการของผู้ใช้สามารถสรุปเป็น หัวข้อได้ดังนี้
1. วางแผนการพัฒนาเว็บเพจ
2. กำหนดไดเร็กทรอรี่ หรือโฟลเดอร์ (Directory/Folder) ที่ใช้เก็บเอกสารเว็บ
3. สร้างภาพหรือจัดหาภาพที่เกี่ยวข้องกับเนื้อหา แล้วจัดเก็บไว้ในไดเร็กทรอรี่ตามข้อ
4. สร้างเอกสารเว็บ โดยกำหนดชื่อไฟล์เอกสารเว็บ ตามข้อกำหนดของผู้ดูแลระบบเครือข่ายและจัดเก็บไว้ในไดเร็กทรอรี่
ตามข้อ
5. ตรวจสอบผลเอกสารเว็บผ่านเบราเซอร์
6. ส่งข้อมูลขึ้นเครื่องแม่ข่าย (Server) และทำการตรวจสอบผลการเรียกดูจากเครื่องแม่ข่าย
รายละเอียดต่างๆในขั้นตอนการพัฒนาเว็บนี้ มีหลายประการที่ต้องขึ้นอยู่กับผู้ดูแลระบบ (Web System Administrator) ดังนั้นก่อนดำเนินการพัฒนาเว็บเพจผู้พัฒนาควรติดต่อขอข้อมูลเหล่านี้จากผู้ดูแลระบบก่อนเพื่อไม่ให้เกิดปัญหาภายหลัง
การพัฒนาเว็บเพจที่ดี ควรมีการวางแผนก่อนเสมอ เพื่อให้การแสดงผลเว็บถูกต้อง ตรงกับความต้องการ เพราะขบวน การพัฒนาเว็บเพจ จะต้องเกี่ยวข้องกับระบบปฏิบัติการ (Operating System : OS) หลายระบบ กล่าวคือ ขณะที่สร้างเอกสาร เว็บผู้พัฒนาอาจจะใช้คอมพิวเตอร์ที่มีระบบปฏิบัติการดอส (DOS) หรือไม่ก็ใช้ระบบปฏิบัติการ Windows 95 แต่หลังจาก ที่พัฒนาเสร็จแล้วจะต้องทำการโอนเอกสารเว็บไปเก็บไว้ในเครื่องแม่ข่าย ซึ่งมักจะเป็นระบบปฏิบัติการ Unix หรือไม่ก็ Windows NT เอกสารเว็บที่ทำการโอนไปยังเครื่องแม่ข่ายนี้ อาจจะถูกเรียกดูจากคอมพิวเตอร์ระบบอื่นๆ เช่น Macintosh ซึ่งใช้ระบบปฏิบัติการ System 7จะเห็นได้ว่าเอกสารเว็บจะต้องเกี่ยวข้องกับระบบปฏิบัติการหลายระบบดังนั้นการพัฒนา เว็บเพจต้องคำนึงถึงสิ่งเหล่านี้ด้วย
จากความสัมพันธ์ดังกล่าว นักพัฒนาเว็บเพจ จึงควรจะศึกษาถึง ข้อกำหนดพื้นฐานที่ควรทราบก่อน อันได้แก่ การ กำหนดชื่อโฟลเดอร์, ไฟล์เอกสารเว็บ,ไฟล์ภาพกราฟิก ตลอดจนไฟล์อื่นๆ ที่จะนำมาใช้ใน การทำเว็บเพจ เพราะระบบ ปฏิบัติการ UNIX มีลักษณะการตั้งชื่อแบบ Case-Sensitive หมายถึง ตัวอักษรตัวพิมพ์ใหญ่ และตัวพิมพ์เล็ก (A และ a) จะถือว่าเป็นตัวอักษรคนละตัวกัน ไม่เหมือนกับระบบปฏิบัติการดอส, Windows 3.1, Windows 95 จะถือว่าเป็นตัวอักษร ตัวเดียวกัน ดังนั้นหากผู้พัฒนาใช้ Windows 3.1 เป็นระบบปฏิบัติการของเครื่องที่ใช้สร้างเอกสารเว็บ และกำหนดชื่อไฟล์ Index.htm แต่ขณะที่ป้อนคำสั่ง เพื่อลิงก์ไฟล์ผ่านแป้นพิมพ์เป็น index.html เมื่อโอนถ่ายเอกสารเว็บนั้นๆ ไปยังเครื่องแม่ข่ายที่ใช้ UNIX เป็นระบบปฏิบัติการ จะเกิดปัญหาในการเรียกดูได้ เพราะระบบปฏิบัติการที่เครื่องแม่ข่าย จะเห็นเป็น ไฟล์คนละไฟล์ เนื่องจากชื่อไฟล์ไม่เหมือนกัน
ลักษณะโครงสร้างของเว็บเพจ
โครงสร้างของเว็บเพจ (Site Structure)
โครงสร้างแบบลำดับชั้น
ตัวอย่างโครงสร้างของเว็บเพจ เวิลด์ ไวด์ เว็บ แบบลำดับชั้น
1. กำเนิด World Wide Web
2. เวิลด์ ไวด์ เว็บ เซิร์ฟเวอร์ (Word Wide Web Server)
2.1 World Wide Web Server ของจุฬาลงกรณ์มหาวิทยาลัย ใส่รูป p01.jpg
(http://www.chula.ac.th)
2.2 World Wide Web Server ของหอสมุดคณะแพทยศาสตร์ ใส่รูป p02.jpg
(http://md3.md.chula.ac.th)
2.3 World Wide Web Server ของสำนักข่าว CNN ใส่รูป p03.jpg
(http://www.cnn.com)
2.4 World Wide Web Server ของบริษัทไมโครซอฟท์ ใส่รูป p04.jpg
(http://www.microsoft.com)
2.5 World Wide Web Server ของ Discovery Online ใส่รูป p05.jpg
(http://www.discovery.com)
3. รหัสการสืบค้น (URL : Uniform Resource Locator) 4. เอชทีทีพี (HTTP)
5. โฮมเพจ (Home Page) ภาพแสดงตำแหน่งของ Home Page (pic06.jpg),
6. เว็บเพจ (Web Page)
7. เว็บไซต์
8. เอชทีเอ็มแอล (HTML)
9. ไฮเปอร์เท็กซ์ (Hypertext)
10. โปรแกรมเวิลด์ไวด์เว็บเบราเซอร์ (WWW Browser)
11. การสืบค้นข้อมูลบนเวิลด์ไวด์เว็บ
12. การใช้เว็บไซต์ ประเภทสืบค้นข้อมูล
12.1 http//www.yahoo.com เว็บสืบค้นยาฮู
12.2 http//www.lycos.com เว็บสืบค้นไลคอส
12.3 http//www.infoseek.com เว็บสืบค้นอินโฟซีค
12.4 http//www.Excite.com เว็บสืบค้นเอ็กไซท์
12.5 http//www.AltaVista.com เว็บสืบค้นอัลต้า วิสต้า
12.6 http//www.LookSmart.com เว็บสืบค้นลุคสมาร์ท
12.7 http//www.Netscape เว็บสืบค้นเน็ตสเคป
โครงสร้างแบบแผนผัง (Sitemap)
การกำหนดโฟลเดอร์ก่อนที่จะทำการสร้างชุดเอกสารเว็บเพจนั้น เป็นลำดับขั้นตอนที่ควรกระทำทุกครั้ง เพื่อให้เอกสาร เว็บแต่ละชุดนั้นมีระบบการจัดเก็บที่เป็นระบบ สามารถค้นหาเรียกใช้งานและแก้ไขข้อมูลภายหลังได้โดยสะดวก โดยที่ ในการสร้างชุดเอกสารเว็บแต่ละชุดนั้นจะประกอบไปด้วยแฟ้มข้อมูลจำนวนมาก ทั้งเอกสารเอชทีเอ็มแอล แฟ้มข้อมูล รูปภาพ เสัยง ภาพเคลื่อนไหว และอื่น ๆ ที่เกี่ยวข้องกับเว็บเพจ ดังนั้นแฟ้มข้อมูลทั้งหมดนี้ควรจัดเก็บไว้อย่างเป็นหมวด หมู่ โดยอาจสร้างเป็นโฟลเดอร์ย่อยเพื่อทำการแยกกลุ่มแฟ้มข้อมูล แต่จะต้องสร้างภายใต้โฟลเดอร์หลักของโปรแกรม ทั้งหมด ไม่ควรแยกไว้คนละตำแหน่งกัน เพราะจะทำให้การจัดการเกี่ยวกับเวบเพจนั้นมีปัญหายุ่งยากได้ โดยทำการ สร้างโฟลเดอร์ 1 โฟลเดอร์ ต่อเว็บไซต์ 1 เว็บไซต์
ตัวอย่าง การสร้างโฟลเดอร์ชื่อ WEB-SITE ไว้ที่ desktop ของ Windows
- ที่หน้าจอของคอมพิวเตอรจะแสดง Desktop ของ Windows
- นำเมาส์ไปชี้ตรงตำแหน่งพื้นที่ว่างบน Desktop จากนั้นให้กดปุ่มเมาส์ทางด้านขวาเพื่อแสดงเมนูลัด
- ทำการเลือกคำสั่ง New จากนั้นเลือก Folder
- ใหทำการพิมพ์ชื่อของโฟลเดอร์ ในที่นี้คือ WEB-SITE จากนั้นทำการกดปุ่ม ENTER
จะปรากฏโฟลเดอร์ชื่อ WES-SITE
เอกสารเว็บโดยทั่วไปแล้วจะต้องเกี่ยวข้องกับรูปภาพโดยตรง เพื่อใช้ในการสื่อสารความหมายกับผู่ใช้งานได้ชัดเจนมากกว่าการสื่อความหมายด้วยตัวอักษรเพียงอย่างเดียว อีกทั้งเป็นการดึงดูดคสามสนใจของผู้ใช้งาน ดังนั้นเมื่อทำการสร้างรูปภ าพหรือจัดหารูปภาพเป็นที่เรียบร้อยแล้ว ควรที่จะทำการคัดลอกมาเก็บไว้ในโฟลเดอร์ ที่ได้จัดเตรียมไว้ เพื่อให้สะดวกในการเรียกใช้งานรูปภาพนั้นและสะดวกต่อการบริหารเว็บไซต์ในอนาคต แฟ้มข้อมูลรูปภาพที่นำมาใช้ในการทำเว็บเพจนั้น ปัจจุบันนิยมใช้อยู่ 2 รูปแบบคือ
- ไฟล์ฟอร์แมต JPEG (Joint Photographer's Experts Group File)
- ไฟล์ฟอร์แมต GIF (Graphics Interlace File)
การจัดหารูปภาพที่นำมาใช้ในการจัดทำเว็บเพจนั้น สามารถจัดเตรียมได้หลายวิธี เช่น
- สร้างรูปภาพโดยโปรแกรมกราฟฟิกต่าง ๆ เช่น PhotoShops, Corel Draw เป็นต้น ในการสร้างแฟ้มข้อมูลรูปภาพ
ซึ่งจะได้ภาพที่ตรงกับความต้องการ แต่ใช้เวลาในการสร้างภาพมากขึ้น
- เลือกรูปภาพจากชุดภาพสำเร็จรูป ที่มีการวางจำหน่ายในลักษณะคลังรูปภาพสำหรับทำเว็บเพจ (Web ClipArt)
ซึ่งสะดวกรวดเร็วและง่ายต่อการใช้งาน แต่อาจจะได้ภาพที่ไม่ตรงกับความต้องการมากนัก
- นำรูปภาพจากโปรแกรมอื่น หรือเว็บเพจอื่นมาใช้งาน ซึ่งสะดวกรวดเร็วต่อการใช้งานเช่นกันแต่อาจเกิดปัญหา
ทางด้านลิขสิทธิ์ของภาพ
การสร้างเอกสารเว็บ
งานเทคโนโลยีเพื่อการศึกษา และพัฒนาทรัพยากรมนุษย์ (AP5) ฝ่ายประยุกต์เทคโนโลยี หน่วยงานในสังกัดศูนย์ เทคโนโลยีอิเล็กทรอนิกส์และคอมพิวเตอร์แห่งชาติ ที่มีหน้าที่หลักในการพัฒนาบุคลากร และเผยแพร่เทคโนโลยี โดยใช้รูปแบบจัดฝึกอบรม ตลอดจนเป็นศูนย์กลางการให้บริการวิชาการด้านเทคโนโลยีอิเล็กทรอนิกส์คอมพิวเตอร์ โทรคมนาคมและสารสนเทศ ให้แก่หน่วยงานทั้งภาครัฐ ภาคเอกชน และบุคคลทั่วไป บนพื้นฐานขององค์ความรู้ การปฏิบัติงาน และ ประสบการณ์ เพื่อพัฒนาขีดความสามารถในการแข่งขันของบุคลากรของประเทศ ได้เล็งเห็นความสำคัญของการพัฒนา บุคลากร และถ่ายทอดความรู้ จึงได้จัดทำระบบe-Learning เพิ่มเติมจากการจัดฝึกอบรมภายในหน่วยงานให้กับผู้สนใจทุกคน
ระบบ e-Learning ของ AP5 จัดทำในลักษณะสื่อเติม (Complementary Media) คือ ผู้เรียนสามารถเลือกเรียนได้ตาม ความต้องการ และผู้สอน (วิทยากรของเนคเทค) สามารถเพิ่มเติมเนื้อหาได้ตลอดเวลา นอกเหนือจากการบรรยายปกติในห้องเรียน โดยใช้เทคโนโลยีเว็บเพจที่มีลักษณะครอบคลุมลักษณะสำคัญของ e-Learning คือ
- Anywhere, Anytime and Anybody คือ ผู้เรียนจะเป็นใครก็ได้ มาจากที่ใดก็ได้ และเรียนเวลาใดก็ได้ตามความ ต้องการของผู้เรียน เพราะหน่วยงานได้เปิดเว็บไซต์ให้บริการตลอด 24 ชั่วโมง รวมทั้งบริการจัดทำเป็นชุด CD เพื่อใช้ ในลักษณะ Offline ให้กับโรงเรียนหรือสถานศึกษาที่สนใจ แต่ยังไม่พร้อมในระบบ อินเทอร์เน็ต
- Multimedia สื่อที่นำเสนอในเว็บ ประกอบด้วยข้อความ ภาพนิ่ง ภาพเคลื่อนไหว และเสียง ตลอดจนวีดิทัศน์ อันจะ
ช่วยกระตุ้นการเรียนรู้ของผู้เรียนได้เป็นอย่างดี
- Non-Linear ผู้เรียนสามารถเลือกเรียนเนื้อหาที่นำเสนอได้ตามความต้องการ
- Interactive ด้วยความสามารถของเอกสารเว็บที่มีจุดเชื่อม (Links) ย่อมทำให้เนื้อหามีลักษณะโต้ตอบกับผู้ใช้โดย
อัตโนมัติอยู่แล้ว และผู้เรียนยังเพิ่มส่วนติดต่อกับวิทยากรผ่านระบบเมล์ ICQ, Microsoft Messenger และสมุดเยี่ยม
ทำให้ผู้เรียนกับวิทยากรสามารถติดต่อกันได้อย่างรวดเร็ว
แนะนำเว็บไซต์ AP5-NECTEC e-Learning
เว็บไซต์การเรียนรู้ และฝึกอบรมระบบ e-learning (AP5-NECTEC e-Learning) ซึ่งมี URL คือ http://www. nectec.or.th/ite แบ่งรูปแบบการนำเสนอเป็น 2 ส่วนหลักๆ ได้แก่ เว็บไซต์แนะนำหน่วยงาน และกิจกรรมต่างๆ ของหน่วยงาน เว็บไซต์ให้ความรู้ผ่านเครือข่ายอินเทอร์เน็ต
ทั้งนี้เนื้อหาต่างๆ ที่นำเสนอในเว็บไซต์สามารถแบ่งเป็นหมวดหมู่ได้ ดังนี้ ข่าวใหม่ – นำเสนอข่าวสารและกิจกรรมต่างๆ ของหน่วยงานที่จะมีขึ้น ตลอดจนแนะนำหนังสือที่จัดทำโดยหน่วยงาน และแนะนำเว็บไซต์ที่น่าสนใจของเนคเทค และเว็บไซต์ด้านการศึกษาจากหน่วยงานอื่นๆ
* หลักสูตรอบรม – นำเสนอข้อมูลการอบรมด้านคอมพิวเตอร์ที่หน่วยงานดำเนินการ พร้อมตารางการอบรม
และแบบฟอร์มการสมัครผ่านเครือข่ายอินเทอร์เน็ต ทั้งนี้หลักสูตรอบรมของหน่วยงาน มีหลากหลายกลุ่ม สามารถแบ่ง
ได้ดังนี้
- Systems/Networking, Linux/ Windows NT, Security Professional, Cisco Systems Series, Microsoft Certified, JAVA,
Application Development, Database, Spreadsheet, Microsoft Access, Graphics & Multimedia, Web Application,
Project Management
ไม่มีความคิดเห็น:
แสดงความคิดเห็น