~~ODT~~
====== มาตรฐานการพัฒนาเว็บไซต์ ======
การพัฒนาเว็บไซต์เป็นช่องทางหนึ่งที่ช่วยสร้างภาพลักษณ์ให้กับองค์กร หน่วยงาน กิจกรรมหรือบุคคล ดังนั้นการออกแบบพัฒนาเว็บไซต์ ต้องคำนึงถึงความพร้อมของผู้ชมเว็บเป็นหลัก คือ ไม่เกิดปัญหาการแสดงผลภาษาไทย โหลดได้เร็ว สืบค้นได้ง่าย รองรับกับเทคโนโลยีส่วนมากของผู้ชมเว็บ ศูนย์บริการความรู้ทางวิทยาศาสตร์และเทคโนโลยี ขอนำเสนอมาตรฐานที่จำเป็นในการออกแบบพัฒนาเว็บไซต์ ดังนี้
มาตรฐานการพัฒนาเว็บไซต์สำหรับเว็บไซต์ต่างๆ
ในสังกัด...
ประกาศ ณ วันที่ ....
**หลักการและเหตุผล**
การพัฒนาเทคโนโลยีทางด้านคอมพิวเตอร์ และระบบเครือข่ายคอมพิวเตอร์ที่เกิดขึ้นอย่างต่อเนื่อง ทำให้ความนิยมในการเข้าถึงข้อมูลหรือใช้บริการต่างๆ ในระบบเครือข่ายอินเทอร์เน็ตมีมากขึ้น ด้วยเหตุนี้จึงมีการใช้ระบบเครือข่ายในการนำเสนอข้อมูล หรือติดต่อสื่อสาร หรือประกอบธรกรรมต่างๆ มากขึ้นตามไปด้วย
เพื่อให้การนำเสนอข้อมูลดังกล่าวของหน่วยงานต่างๆ มีคุณภาพสูง สวย ใช้งานได้ดี จาก Web browser ทุกชนิด รวมทั้งควรมีการค้นหาข้อมูลเกี่ยวกับผลงานทุกประเภทของศูนย์ฯ และเป็น Search engine friendly คณะทำงานบริหารและพัฒนาเทคนิคเว็บไซต์จึงได้กำหนดรูปแบบมาตรฐานของการจัดทำเว็บไซต์ ซึ่งสนับสนุนฟังก์ชันและพันธะกิจขององค์กร โดยเน้นที่ประสิทธิภาพ ความสอดคล้อง และการเข้าถึงโดยไม่แบ่งชนชั้น เพื่อให้เกิดประโยชน์สูงสุดต่อประชาชนผู้สนใจทั่วไป
**นโยบาย**
การจัดทำมาตรฐานการพัฒนาเว็บไซต์ มีวัตถุประสงค์เพื่อสร้างเว็บไซต์ที่สามารถเข้าถึงได้โดยง่าย มีความสอดคล้องและความถูกต้องของข้อมูล และมีส่วนติดต่อกับผู้ใช้ที่สะดวก ทั้งนี้เพื่อให้ผู้เข้าเยี่ยมชมและใช้งานเว็บต่างๆ ของศูนย์ฯ สามารถเข้าถึงข้อมูลและบริการได้ตลอดเวลาและอย่างมีประสิทธิภาพ
**ขอบเขตของการประยุกต์ใช้มาตรฐาน**
มาตรฐานนี้ประยุกต์ใช้กับหน่วยงานย่อยทุกหน่วยงานภายใต้ศูนย์ฯ และทุกเว็บไซต์ให้บริการต่างๆ ที่จัดทำขึ้นโดยศูนย์ฯ แต่เพียงองค์กรเดียว และอยู่ภายใต้โดเมนเนม ....
**มาตรฐาน**
- เว็บไซต์ควรจะสอดคล้องกับข้อกำหนดของ W3C สำหรับ Extensible HyperText Markup Language (XHTML) ระดับ 1.0 หรือ HTML ระดับ 4.0
- เว็บไซต์ควรจะสอดคล้องกับข้อกำหนดของ W3C ในเรื่องการพัฒนาเว็บไซต์ให้ทุกคนเข้าถึงได้ (Web Content Accessibility Guidelines) ระดับ 1.0
- หากเว็บไซต์ใดใช้ Cascading Style Sheets (CSS) เว็บไซต์เหล่านั้นควรจะสอดคล้องกับข้อกำหนดของ W3C สำหรับ CSS ระดับ 1
- รายละเอียดของมาตรฐานแบ่งออกเป็น 4 ประเภท ได้แก่
* มาตรฐานการตั้งชื่อไฟล์และ Directory เป็นการกำหนดวิธีการตั้งชื่อที่สื่อความหมาย เข้าใจตรงกัน สั้นกระชับ และไม่เกิดความสับสน ซึ่งจะช่วยให้ Search engine ให้ค่าความสำคัญของเว็บไซต์สูงสุด หากคำสำคัญพบเป็นชื่อไฟล์และชื่อ Directory โดยตรง รายละเอียดแสดงในเอกสารแนบ 1
* มาตรฐานทางด้านเนื้อหา เป็นการกำหนดมาตรฐานในส่วนของโครงสร้างข้อมูล หรือกรอบพื้นฐานของการนำเสนอเนื้อหา ที่แต่ละหน่วยงานหรือโครงการจะต้องนำเสนอบนระบบเครือข่ายอินเทอร์เน็ต รายละเอียดแสดงในเอกสารแนบ 2
* มาตรฐานทางด้านรูปแบบการใช้ภาษาบนเว็บ เป็นการกำหนดมาตรฐานในส่วนของรูปแบบของการนำเสนอข้อมูลของเว็บไซต์ ให้มีรูปแบบเดียวกัน สามารถแสดงผลบนจอเป็นอักษรไทยหรืออักษรอังกฤษได้ถูกต้องกับ Web browser ทุกชนิด และการนำเสนอข้อมูลภาษาที่ถูกต้องตามหลักภาษา รายละเอียดแสดงในเอกสารแนบ 3
* มาตรฐานทางด้านเทคนิค เป็นการกำหนดมาตรฐานในส่วนของการเขียน HTML หรือส่วนของโค้ดที่เกี่ยวข้อง เพื่อให้เป็นเว็บไซต์ที่ทุกคนเข้าถึงได้ รายละเอียดแสดงในเอกสารแนบ 4
- แต่ละเว็บย่อยภายใต้ศูนย์ฯ จะต้องแก้ไขเส้นเชื่อมที่เสีย (Broken Links) ให้แล้วเสร็จภายใน 2 สัปดาห์ นับจากวันที่ได้รับแจ้ง และผู้ดูแลเว็บควรใช้เครื่องมือตรวจ Links ด้วยตนเองอย่างสม่ำเสมอ
- ทุกๆ หน้าเว็บ ควรจะแสดงข้อมูลต่างๆ (ยกเว้นหน้าเว็บอินทราเน็ต) ดังต่อไปนี้
* ข้อมูลติดต่อหน่วยงาน ได้แก่ ที่อยู่ เบอร์โทรศัพท์ และอีเมล
* เส้นเชื่อมกลับไปยังหน้าหลักของศูนย์ฯ
* คำแถลงการณ์สงวนลิขสิทธิ์
**คำจำกัดความ**
- การโฆษณาประชาสัมพันธ์ – ให้โฆษณาผลิตภัณฑ์ บริการ หรือการอบรมของศูนย์ฯ และของ...
- เว็บไซต์ขององค์กรร่วม (Partners) – เว็บไซต์ขององค์กรอื่น ที่ทำกิจกรรมร่วมกับศูนย์ฯ
- เว็บไซต์ย่อยของศูนย์ฯ – เว็บไซต์ของหน่วยงานย่อยภายใต้สังกัดศูนย์ฯ หรือเว็บไซต์ของบริการหรือโครงการที่บริหารจัดการโดยหน่วยงานย่อยภายใต้สังกัดศูนย์ฯ
- หน้าเว็บ HTML – หน้าเว็บที่มีโค้ด HTML
- เว็บไซต์อินทราเน็ต – เว็บไซต์ที่เฉพาะพนักงานของศูนย์ฯ เข้าถึงได้เท่านั้น
- เว็บไซต์ – กลุ่มของไฟล์เว็บ หรือกลุ่มของหน้าเว็บ
===== เอกสารแนบ 1 มาตรฐานการตั้งชื่อไฟล์และ Directory =====
**ข้อกำหนด**
- ให้ใช้ตัวอักษรและตัวเลข โดยไม่มีเครื่องหมายวรรคตอนใดๆ ยกเว้นแต่ . และ – เท่านั้น (ไม่ใช้ space และ underscore “_” เพราะจะสร้างปัญหาเมื่อเป็นส่วนหนึ่งของ URL) ตัวอย่าง grid-computing.sxw เป็นต้น
- ชื่อไฟล์ทุกชนิดที่ใช้บน Webpage ให้ตั้งชื่อเป็นภาษาอังกฤษเท่านั้น
- ชื่อไฟล์ของเอกสารแนบ
* ในการร่างเอกสารเป็นครั้งแรก ขอให้ใส่วันที่ไว้ข้างหน้า โดยรูปแบบของวันที่คือ yyyymmdd ตัวอย่าง 20050809-grid-computing.sxw เป็นต้น
* ในกรณีที่ในวันเดียวกันนั้น มีการแก้ไขและทบทวนออกมาอีก 2 versions ให้ตั้งชื่อไฟล์ใหม่ โดยเติมตัวเลขกำกับ version ต่อท้าย ตัวอย่าง 20050809-grid-computing-1.sxw และ 20050809-grid-computing-2.sxw เป็นต้น
* ในกรณีที่มีการแก้ไขและปรับปรุงในวันอื่นๆ ถัดมา ให้ตั้งชื่อใหม่ตามวันที่ ตัวอย่าง 20050818-grid-computing.sxw
* ในกรณีที่มีการแจกไฟล์ให้กับผู้เกี่ยวข้องพร้อมกันหลายคน และอาจจะต้องนำไฟล์ที่แก้ไขนั้นมารวมกันใหม่ ให้ผู้ที่อยู่ในทีมงาน ใส่ชื่อย่อของตัวเองต่อท้าย version และใช้ Track-change เพื่อให้สามารถมองเห็นส่วนที่แก้ไขได้ชัดเจน ทั้งนี้ทุกคนอาจใช้เลข version ใหม่ที่เป็นเลขเดียวกันได้
- ชื่อ Directory สำหรับการสร้างเว็บไซต์
* ให้ตั้งด้วยคำภาษาอังกฤษที่กระชับและสั้นที่สุด (ไม่ต้องใส่วันที่หรือคำขยายความใดๆ) เพื่อช่วยให้ Search engine ค้นหาพบโดยง่าย
* ในกรณีที่มีหลายคำ ให้ใช้ “-“ (Hyphen) เชื่อมระหว่างคำ ไม่ใช้ช่องว่าง (Space) หรือ “_” Underscore
===== เอกสารแนบ 2 มาตรฐานทางด้านเนื้อหา =====
**ข้อกำหนด**
เว็บไซต์ของหน่วยงานย่อยต่างๆ ภายในศูนย์ฯ จะต้องนำเสนอเนื้อหาขั้นต่ำดังต่อไปนี้
- เกี่ยวกับหน่วยงาน (About us) เป็นส่วนที่นำเสนอข้อมูลแนะนำหน่วยงานนั้นๆ
- โครงสร้างหน่วยงาน (Organization Structure and Staff Directory) เป็นส่วนที่แนะนำโครงสร้างของหน่วยงาน ว่าแบ่งออกเป็นกี่ระดับ มีใครบ้าง โดยนำเสนอทั้งชื่อ อีเมล และเบอร์โทรติดต่อ
- โครงการสำคัญ เป็นส่วนนำเสนอโครงการต่างๆ ของหน่วยงานนั้น ทั้งโครงการที่กำลังอยู่ในขั้นตอนของการดำเนินการ และโครงการที่ดำเนินการเสร็จสิ้นไปแล้ว
- Site Map เป็นส่วนที่นำเสนอโครงสร้างของเว็บไซต์ของหน่วยงานนั้น
- Contact us เป็นส่วนที่นำเสนอข้อมูลเกี่ยวกับวิธีการติดต่อกับหน่วยงานนั้น โดยมีที่อยู่ เบอร์โทรศัพท์หน่วยงาน และอีเมล โดยที่อยู่ของอีเมลในเว็บเพจ ให้ทำเป็นกราฟิก โดยไม่มี ALT mailto:email-address ประกอบ
* [[http://services.nexodyne.com/email/index_custom.php|บริการออนไลน์ช่วยสร้างอีเมลแบบกราฟิก]]
**คำแนะนำ**
หน่วยงานย่อยต่างๆ ภายในศูนย์ฯ ควรจะนำเสนอข้อมูลดังต่อไปนี้
- กิจกรรม สัมมนา เป็นส่วนที่นำเสนอปฏิทินกิจกรรมโดยสามารถสืบค้นกิจกรรมที่เคยดำเนินการผ่านมาแล้ว กิจกรรมที่กำลังดำเนินการอยู่ และกิจกรรมที่กำลังจะดำเนินการ
===== เอกสารแนบ 3 มาตรฐานทางด้านรูปแบบการใช้ภาษาบนเว็บ =====
**ข้อกำหนด**
หน่วยงานย่อยต่างๆ ของศูนย์ฯ จะต้องนำเสนอข้อมูลโดยมีรูปแบบของการนำเสนอข้อมูล และการแสดงผลภาษาดังต่อไปนี้
- ในการนำเสนอข้อมูลในแต่ละหน้าจะต้องมี Header และ Footer ของเว็บศูนย์ฯ ใส่อยู่เสมอ ซึ่งจะต้องประกอบไปด้วยข้อมูลดังต่อไปนี้
* Header จะต้องประกอบด้วย โลโก้ขององค์กรที่จะลิงค์กลับไปที่หน้าแรกขององค์กร, ชื่อของหน่วยงานที่จะลิงค์ไปที่หน้าแรกของหน่วยงาน, เมนูหลักของเว็บไซต์, และช่องสำหรับค้นหาข้อมูล
* Footer จะต้องประกอบไปด้วยข้อความสงวนลิขสิทธิ์ (Copyright) ในการนำข้อมูลในเว็บไซต์ไปใช้
- สำหรับเอกสารภาษาไทย การใช้เครื่องหมายวรรคตอนจะต้องเป็นไปตามข้อกำหนด
**คำแนะนำ**
หน่วยงานต่างๆ ควรจะมีรูปแบบของการนำเสนอ และการแสดงผลภาษาไทยดังต่อไปนี้
- ข้อมูลทุกส่วนของเว็บไซต์ ควรจะมีการนำเสนอทั้งหน้าเอกสารภาษาไทย และหน้าเอกสารภาษาอังกฤษ และควรจัดทำลิงค์สำหรับการเปลี่ยนระหว่างหน้าภาษาไทย และหน้าภาษาอังกฤษ และควรจัดวางตำแหน่งของลิงค์ไว้ในตำแหน่งที่สามารถเห็นได้ชัดเจน
- ในเอกสารภาษาอังกฤษ ในการแสดงตัวเลขที่มีค่าน้อยกว่า 20 ควรจะใช้คำในภาษาอังกฤษแทนตัวเลขนั้น เช่น I bought 5 pens for 20 baht. ควรเขียนเป็น I bought five pens for 20 baht. ตามหลักทั่วไปของการใช้ภาษาอังกฤษที่ดี
===== เอกสารแนบ 4 มาตรฐานทางด้านเทคนิค =====
**ข้อกำหนด**
* เอกสารเว็บจะต้องมีการกำหนดชื่อของเอกสารหน้านั้น ไว้ในส่วนของแท็ก ... โดยชื่อที่กำหนดขึ้นมาควรใช้ภาษาอังกฤษ และต่อท้ายด้วยภาษาไทยได้ และอธิบายถึงภาพรวมของเว็บไซต์นั้นๆ ให้ได้มากที่สุด เพราะชื่อของเอกสารที่กำหนดไว้นี้ จะส่งผลให้โปรแกรมเก็บข้อมูลของเว็บไซต์ที่ให้บริการค้นหาข้อมูล (Search Engine) สามารถตรวจพบ และเก็บชื่อที่กำหนดให้กับเอกสาร เข้าไว้ในระบบฐานข้อมูล เพื่อใช้เป็นคีย์เวิร์ด สำหรับการค้นหาเว็บไซต์ต่อไป (ข้อความที่ระบุใน นี้ไม่ควรยาวเกิน 64 ตัวอักษร)
* ไม่ควรใช้เทคนิคใดๆ ในการพิมพ์ เช่น เว้นวรรคระหว่างตัวอักษร หรือควบคุมด้วย Javascript
* ตัวอย่างชื่อเว็บของมหาวิทยาลัยเกษตรศาสตร์ โดยการค้นด้วยคำว่า ku ผ่าน Google ปรากฏเป็น Kasetsart University มหาวิทยาลัยเกษตรศาสตร์
{{ :standard:title-tag.png?nolink |}}
* กรณีที่พัฒนาเว็บด้วย CMS: Content Management System เช่น Joomla จะต้องกำหนด Title ของบทความและเว็บไซต์จากส่วนควบคุม CMS ด้วย
{{ :standard:title-joomla-article.png?nolink |}}
* เอกสารเว็บควรกำหนดคีย์เวิร์ดให้กับเอกสารนั้นๆ โดยการใช้แท็ก <meta name="keywords" content="คีย์เวิร์ดสำหรับโฮมเพจ"> ตัวอย่างเช่น <meta name="keywords" content="STKS, Science and Technology Knowledge Services, NSTDA, Library, ห้องสมุด, บริการทรัพยากรสารสนเทศ"> เป็นต้น ซึ่งคีย์เวิร์ดนี้จะเป็นข้อมูลอีกส่วนหนึ่งที่โปรแกรมเก็บข้อมูลของเว็บไซต์ค้นหาข้อมูล (Search Engine) บางชนิด เก็บไปทำเป็นคีย์เวิร์ด สำหรับการค้นหาเว็บไซต์ ดังนั้นถ้าต้องการให้เอกสารถูกตรวจพบโดยเว็บไซต์ที่เป็น Search Engine หลายๆ ชนิด เราควรจะใส่ทั้งชื่อของเอกสาร และใส่คีย์เวิร์ดในแท็ก <meta name="keywords" ...>
* กรณีที่พัฒนาเว็บด้วย CMS จะต้องกำหนด Keyword ของบทความและเว็บไซต์จากส่วนควบคุม CMS ด้วย
{{ :standard:keyword-metatag.png?nolink |}}
* เอกสารเว็บทุกแฟ้มจะต้องกำหนดคำอธิบายเว็บอย่างย่อโดยการใช้แท็ก <meta name=“description” content=“คำอธิบายเว็บ”> เพื่อเป็นข้อมูลสำหรับ Search Engine แสดงผลประกอบการสืบค้นเว็บไซต์ ทั้งนี้ไม่ควรยาวเกิน 250 ตัวอักษร
* กรณีที่พัฒนาเว็บด้วย CMS จะต้องกำหนดคำอธิบายเว็บของบทความและเว็บไซต์จากส่วนควบคุม CMS ด้วย
* ตัวอย่างคำอธิบายเว็บของมหาวิทยาลัยเกษตรศาสตร์
{{ :standard:title-tag.png?nolink |}}
* เอกสารเว็บควรกำหนดชื่อหน่วยงานหรือผู้พัฒนาเว็บ โดยการใช้แท็ก <meta name=“author” content=“ชื่อหน่วยงาน/ผู้พัฒนาเว็บ”>
* เอกสาร HTML ทุกหน้าจะต้องมีการกำหนดชุดของตัวอักษร (Character Set) โดยจะต้องกำหนดเป็นชุด TIS-620 หรือ UTF-8 ซึ่งการกำหนดชุดของตัวอักษรในเอกสารแต่ละหน้านั้นจะใช้รูปแบบเป็น <meta http-equiv="Content-Type" content="text/html;charset=TIS-620"> หรือ <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
* การระบุ TIS-620 หรือ UTF-8 จะต้องระบุให้เหมือนกันทั้งเว็บ และต้องตรงกับระบบภาษาไทยของโปรแกรมจัดการฐานข้อมูล และ Web Programming
* [[http://www.submitexpress.com/analyzer|บริการออนไลน์ตรวจสอบ/ให้คำแนะนำการระบุ Web Metatag]]
* [[http://www.submitexpress.com/metatags.html|บริการออนไลน์ช่วยสร้างรายการ Web Metatag]]
* [[standard:thai-encodig-notepad|การเลือก Thai Encoding สำหรับ NotePad]]
* [[standard:thai-encodig-dreamweaver|การเลือก Thai Encoding สำหรับ Dreamweaver]]
* [[standard:thai-encodig-notepad-plus|การเลือก Thai Encoding สำหรับ NotePad++]]
* ในเอกสารที่จะนำขึ้นเผยแพร่บนระบบเครือข่ายอินเทอร์เน็ต จะต้องกำหนดชนิดของฟอนต์ที่ใช้ โดยการใช้แท็ก <font face="ชื่อของฟอนต์"> โดยเฉพาะเว็บไซต์ที่มีการใช้ข้อมูลที่เป็นภาษาไทย จะต้องกำหนดชื่อฟอนต์ที่มีอยู่ในเครื่อง Macintosh และ PC พร้อมทั้งระบุขนาดที่เหมาะสมด้วย
* ในหน้าภาษาไทยกำหนดเป็น <font face=" "Tahoma, MS Sans Serif, Thonburi">...</font>
* ฟอนต์ Thonburi เป็นฟอนต์สำหรับเครื่อง Macintosh
* ในหน้าภาษาอังกฤษควรจะกำหนดเป็น <font face="Arial, Helvetica">...</font>
* ในการใช้แท็ก <font face="...">...</font> นั้น ให้ระบุไว้ที่ตอนต้นของเอกสารครั้งเดียว ไม่ต้องเขียนหลายรอบ เพราะจะเป็นการเพิ่มขนาดของไฟล์เอกสาร HTML โดยไม่จำเป็น ยกเว้นเมื่อมีการใช้แท็ก <table> เพื่อกำหนดการแสดงผลแบบตารางจะต้องมีการระบุ <font face="..."> ไว้หลังแท็ก <td> ทุกแท็กของตารางนั้น
* สำหรับ CSS ให้ระบุด้วยคำสั่ง Font-Family: Tahoma, "MS Sans Serif", Thonburi;
* ในกรณีที่มีการเปลี่ยนขนาดของฟอนต์ ไม่ต้องกำหนด <font face="...">...</font> ให้ใช้แท็ก <font size="...">...</font> ได้ทันที หรือใช้ CSS ในการควบคุม
* สำหรับการใช้งาน ข้อมูลประเภทรายการ หรือตารางในเอกสาร โดยการใช้แท็ก <ol>, <ul>, <dl> และ <table> ไม่ควรใช้ซ้อนกันเกินสองระดับ เพราะอาจเป็นผลทำให้ เอกสารนั้นกว้างเกินหน้าจอ ทำให้เกิดสกรอลล์บาร์ทางด้านล่าง ของโปรแกรมเว็บเบราว์เซอร์ ซึ่งจะทำให้ผู้ใช้ ต้องทำการเลื่อนดูข้อมูล ที่ขาดหายไป และยังทำให้การพิมพ์เอกสารหน้านั้นออกมาทางเครื่องพิมพ์ ข้อความบางส่วนจะขาดหายไป (ส่วนที่เกินหน้าจอ)
* ในการเขียน HTML นั้น ควรจะเขียนโค้ดให้เป็นระเบียบ และมีคอมเมนต์อธิบายไว้เป็นระยะ โดยความยาวของ HTML ในแต่ละบรรทัด ไม่ควรเกิน 80-90 ตัวอักษร เพื่อให้สามารถอ่านข้อมูล และปรับปรุงแก้ไขได้ง่าย นอกจากนั้นการตัดคำภาษาไทยของเอกสารหน้านั้นๆ ยังสามารถทำได้อย่างถูกต้องอีกด้วย
* การนำภาพมาประกอบในเอกสาร โดยการใช้แท็ก <img ...> นั้น จะต้องกำหนดความกว้าง และความสูงที่ถูกต้องของภาพนั้นไว้ด้วยเสมอ เพราะจะทำให้การจัดโครงร่างของเอกสาร ทำได้อย่างรวดเร็ว และที่สำคัญจะต้องกำหนดแอทริบิวต์ alt และ title ไว้ภายในแท็ก <img scr="ชื่อไฟล์ภาพ" width="ความกว้างเป็นพิกเซล" height="ความสูงเป็นพิกเซล" alt="คำอธิบายภาพ" title="คำอธิบายภาพ"> เพื่อแสดงข้อความอธิบายสำหรับเว็บเบราว์เซอร์บางชนิด ที่ไม่สามารถแสดงข้อมูลที่เป็นรูปภาพได้ และเป็นข้อมูลสำหรับการสืบค้นของ Search Engine
* กรณีที่ใช้ CMS สามารถกำหนดค่าความกว้าง ความสูง และคำอธิบายภาพได้จากระบบ
* การนำรูปภาพมาประกอบในเอกสาร HTML นั้น ถ้ารอบๆ ตำแหน่งที่วางรูปภาพมีตัวอักษร ควรจะกำหนดระยะห่างจากขอบของรูปทุกด้าน โดยการใช้แอทริบิวต์ vspace="ระยะห่างเป็นพิกเซล" hspace="ระยะห่างเป็นพิกเซล" และถ้ารูปนั้นเป็นตัวเชื่อมโยงไปยังเอกสารอื่น ไม่ควรกำหนดความกว้างของกรอบ คือ ความกว้างเท่ากับศูนย์ โดยใช้แอทริบิวต์ border="0" เช่น %%<img alt="VIDEO" src="http://www.stks.or.th/graphics/video-56.gif" width= "56" height= "20" border="0" hspace="3" vspace="3">%%
* กรณีที่ใช้ CMS สามารถกำหนดค่าความกว้าง ความสูง และคำอธิบายภาพได้จากระบบ
{{ :standard:image-joomla.png?nolink |}}
* ในการตั้งชื่อแฟ้มข้อมูลและชื่อไดเร็กทอรี่ ที่ใช้ในการเก็บข้อมูล จะต้องใช้ชื่อภาษาอังกฤษที่ไม่ยาวเกินไปและสื่อความหมาย โดยชื่อประกอบด้วยตัวอักษรตัวเล็ก ไม่มีการเว้นวรรคระหว่างชื่อ และนามสกุลของไฟล์เอกสาร HTML จะต้องเป็น .html หรือ.htm (หรืออื่นๆ ตามระบบที่ดำเนินการ) และแฟ้มข้อมูลแรกที่ต้องการให้ผู้เข้าชมเห็นควรจะตั้งชื่อเป็น "index" ในทุกๆ ไดเร็กทอรี่จะต้องมีไฟล์ชื่อนี้อยู่ด้วย เพื่อไม่ให้ผู้ใช้เห็นแฟ้มข้อมูลทั้งหมดที่อยู่ในไดเร็กทอรี่นั้น เช่น ในไดเร็กทอรี่ที่เก็บภาพควรจะสร้างไฟล์เปล่าๆ แล้วบันทึกไว้ในชื่อ "index" เพื่อไม่ให้ผู้เข้าชมมองเห็นรายชื่อของไฟล์ทั้งหมด ที่อยู่ในไดเร็กทอรี่นั้น เป็นต้น
* ผู้เข้าชมเว็บไซต์ควรได้รับแจ้งข้อมูลเกี่ยวกับการใช้งานโปรแกรมปลั๊กอิน (Plug-ins) พร้อมทั้งควรมีจุดเชื่อม (Link) ให้สามารถดาวน์โหลดและติดตั้งโปรแกรมนั้นๆ ได้โดยสะดวก
* ห้ามคัดลอก (Copy) เอกสารจากเว็บใดๆ หรือเอกสารต้นฉบับเช่น Microsoft Office, OpenOffice.org มาวางบน WYSIWYG Editor เนื่องจากจะติด Special Code ของโปรแกรมนั้นๆ มาด้วย ส่งผลให้การแสดงผลเอกสารไม่เป็นไปในแนวทางเดียวกันทั้งหมด ควรจะนำไปวาง (Paste) บน NotePad หรือ Text Editor ใดๆ ก่อนแล้วจึงคัดลอกมาวางบน WYSIWYG Editor อีกครั้ง หรือใช้บริการ HTML Cleaner
* เว็บไซต์จะต้องติดซอฟต์แวร์วิเคราะห์การเข้าชม เช่น Truehits, Google Analytic
**คำแนะนำ**
* ในระหว่างการพัฒนาโฮมเพจ ควรจะมีการทดสอบการแสดงผล โดยการใช้โปรแกรมเว็บเบราว์เซอร์หลายๆ ชนิด เช่น
* โปรแกรม Mozilla Firefox บน PC
* โปรแกรม Internet Explorer บน PC
* โปรแกรม Mozilla Firefox บน Macintosh
* โปรแกรม Internet Explorer บน Macintosh
* โปรแกรม Safari บน Macintosh
* ทุกเว็บเบราว์เซอร์ใหม่ๆ ที่สามารถทดสอบได้
* ในการทดสอบการแสดงผล ควรทดสอบที่ความละเอียดของหน้าจออย่างต่ำ 800 x 600 จุด และแนะนำให้ใช้ความละเอียดของหน้าจอ 1024 x 768 จุด เพื่อความเหมาะสมและสวยงามที่สุด
* ควรทดสอบระยะเวลาที่ใช้ในการดูเว็บเพจ โดยทดสอบด้วยการใช้โมเด็มความเร็ว 56 kbps ซึ่งเว็บเพจที่พัฒนาขึ้นควรจะเริ่มแสดงผลข้อมูลไม่เกิน 10 วินาทีหลังจากได้รับการร้องขอ (Request) และแสดงผลได้สมบูรณ์ไม่เกิน 30 วินาที เนื่องจากผู้เข้าชมเว็บเพจที่พัฒนาขึ้น อาจจะมาจากต่างสถานที่กัน ใช้โมเด็มความเร็วต่างกัน ผู้พัฒนาควรทดสอบการเข้าชมเว็บเพจ จากโมเด็มที่มีความเร็วที่ครอบคลุมถึงผู้ใช้ส่วนใหญ่
* การตั้งชื่อที่อยู่ของอีเมลของหน่วยงาน ให้ตั้งชื่อเป็นกลาง "webmaster@หน่วยงาน/บริการ.stks.or.th" หรือ "webmaster-หน่วยงาน@stks.or.th" โดยเสนอให้จัดแสดงที่อยู่ของอีเมลในลักษณะภาพกราฟิก(Image) เพื่อป้องกันการเก็บรวบรวมอีเมลโดยอัตโนมัติเพื่อการส่งอีเมลขยะ
===== ตารางช่วยวิเคราะห์ =====
**หมายเหตุเกี่ยวกับตารางนี้**
คำว่า "ถูก" หรือ "ผิด" ในที่นี้หมายถึง สอดคล้องตามมาตรฐานนี้ ไม่ได้แปลว่าจะผิดไวยารกรณ์ของการตั้งชื่อไฟล์หรือการสร้างเว็บ ท่านทำผิดแล้วคอมพิวเตอร์จะไม่ยอมทำตาม ระบบของเว็บจะไม่ปรากฏข้อความแสดงปัญหาใดๆไม่ว่าท่านจะทำ "ถูก" หรือ "ผิด"
<html>
<table width="100%" cellpadding="0" cellspacing="0">
<tr bgcolor="#000066">
<td width="568" valign="top"><p align="center"><font color="#FFFFFF"><strong> ลำดับที่ </strong></font></p></td>
<td width="568" valign="top"><p align="center"><font color="#FFFFFF"><strong> รายการ </strong></font></p></td>
<td width="568" valign="top"><p align="center"><font color="#FFFFFF"><strong> ตัวอย่าง/ข้อมูลสนับสนุน </strong></font></p></td>
<td width="568" valign="top"><p align="center"><font color="#FFFFFF"><strong> หมายเหตุ </strong></font></p></td>
</tr>
<tr bgcolor="#FF99FF">
<td width="568" colspan="4" valign="top"><p><strong> มาตรฐานการตั้งชื่อโฟลเดอร์และแฟ้มเอกสาร </strong></p></td>
</tr>
<tr bgcolor="#FFFFCC">
<td colspan="2" valign="top"> <p> ชื่อไฟล์ทุกฟอร์แมตให้ตั้งชื่อเป็นภาษาอังกฤษเท่านั้น </p></td>
<td width="568" valign="top"><p> ห้องสมุดดิจิทัล.odt - ผิด </p>
<p>digital-library.odt - ถูก </p></td>
<td width="568" valign="top"><p> </p></td>
</tr>
<tr>
<td colspan="2" valign="top"> <p> ให้ใช้ตัวอักษรและตัวเลข โดยไม่มีเครื่องหมายวรรคตอนใดๆ ยกเว้น . และ – เท่านั้น ( ไม่ใช้ space และ underscore “_” เพราะจะสร้างปัญหาเมื่อเป็นส่วนหนึ่งของ URL) </p></td>
<td width="568" valign="top"><p>digital_library.odt - ผิด </p>
<p>digital-library.odt - ถูก</p>
</td>
<td width="568" valign="top"><p> </p></td>
</tr>
<tr bgcolor="#FFFFCC">
<td colspan="2" valign="top"> ควรเป็นคำที่สื่อความหมายสำหรับ <br>
Search Engine </td>
<td width="568" valign="top"><p>dl.odt - ผิด </p>
<p>digital-library.odt - ถูก </p></td>
<td width="568" valign="top"><p> </p></td>
</tr>
<tr bgcolor="#FF99FF">
<td width="568" colspan="4" valign="top"><p><strong> มาตรฐานการทางเทคนิค</strong></p></td>
</tr>
<tr>
<td colspan="2" valign="top"><p>กำหนด Title ของเอกสารเว็บด้วยแท็ก <title>…</title> ให้ถูกต้อง เหมาะสม โดยใช้ภาษาอังกฤษนำ สามารถใช้ภาษาไทยตามได้ </p> </td>
<td width="568" valign="top"><p> ใช้เป็นส่วนสำคัญสำหรับ Search Engine </p></td>
<td width="568" valign="top"><p> </p></td>
</tr>
<tr bgcolor="#FFFFCC">
<td colspan="2" valign="top"><p>Title หลักของเว็บไซต์</p> </td>
<td width="568" valign="top"><p> </p></td>
<td width="568" valign="top"><p> </p></td>
</tr>
<tr>
<td colspan="2" valign="top"><p>Title ของหน้าเว็บเอกสารย่อย</p> </td>
<td width="568" valign="top"><p> </p></td>
<td width="568" valign="top"><p> แบ่งว่ามีเอกสารย่อยอีกหมวด แต่ละหมวดควรใช้ title อะไร </p></td>
</tr>
<tr bgcolor="#FFFFCC">
<td colspan="2" valign="top"><p>กำหนดคีย์เวิร์ดให้กับเอกสาร ด้วยแท็ก < META name="keywords" content=" คีย์เวิร์ดสำหรับโฮมเพจ"> โดยกำหนดได้มากถึง 100 คำ </p> </td>
<td width="568" valign="top"><p> ใช้เป็นส่วนสำคัญสำหรับ Search Engine </p></td>
<td width="568" valign="top"><p> </p></td>
</tr>
<tr>
<td colspan="2" valign="top"><p>Keyword หลักของเว็บไซต์</p> </td>
<td width="568" valign="top"><p> </p>
</td>
<td width="568" valign="top"><p> </p></td>
</tr>
<tr bgcolor="#FFFFCC">
<td colspan="2" valign="top"><p>Keyword ของหน้าเว็บเอกสารย่อย </p> <p align="right"> </p></td>
<td width="568" valign="top"><p> </p></td>
<td width="568" valign="top"><p> แบ่งว่ามีเอกสารย่อยอีกหมวด <br>
แต่ละหมวดควรใช้ keyword อะไร </p></td>
</tr>
<tr>
<td colspan="2" valign="top"><p>กำหนดคำอธิบายให้กับเอกสาร ด้วยแท็ก < META name="description" content=" คำอธิบาย"> </p> </td>
<td width="568" valign="top"><p> ใช้เป็นส่วนสำคัญสำหรับ Search Engine </p></td>
<td width="568" valign="top"><p> </p></td>
</tr>
<tr bgcolor="#FFFFCC">
<td colspan="2" valign="top"><p>Description หลักของเว็บไซต์</p> </td>
<td width="568" valign="top"><p> </p>
</td>
<td width="568" valign="top"><p> </p></td>
</tr>
<tr>
<td colspan="2" valign="top"><p>Description ของหน้าเว็บเอกสารย่อย </p> <p align="right"> </p></td>
<td width="568" valign="top"><p> </p></td>
<td width="568" valign="top"><p> แบ่งว่ามีเอกสารย่อยอีกหมวด <br>
แต่ละหมวดควรใช้ Description อะไร </p></td>
</tr>
<tr bgcolor="#FFFFCC">
<td colspan="2" valign="top"><p>เอกสาร HTML ทุกหน้าจะต้องกำหนดชุดของตัวอักษร (Character Set) เป็น TIS- 620 ด้วยคำสั่ง < META http-equiv="Content-Type" content="text/html;charset=TIS- 620"> </p> </td>
<td width="568" valign="top"><p> เพื่อให้เป็นมาตรฐานตามข้อกำหนด W3C </p></td>
<td width="568" valign="top"><p> </p></td>
</tr>
<tr>
<td colspan="2" valign="top"><p>แบบอักษรที่ใช้ในเอกสารเว็บ ต้องเป็นชุดฟอนต์ดังนี้ Tahome, “MS Sans Serif”, Thonburi </p> </td>
<td width="568" valign="top"><p> เพื่อให้สนับสนุนการปรับขนาดฟอนต์จาก<br>
เว็บเบราว์เซอร์โดยอักษรไม่แตก </p></td>
<td width="568" valign="top"><p> </p></td>
</tr>
<tr bgcolor="#FFFFCC">
<td colspan="2" valign="top"><p>กำหนดคำอธิบายที่สื่อความหมายได้ชัดเจนด้วยแอทริบิวต์ ALT ไว้ภายในแท็ก<br>
<img ...> </p> </td>
<td width="568" valign="top"><p> ใช้เป็นส่วนสำคัญสำหรับ Search Engine และเป็นข้อมูลสำหรับเว็บเบราว์เซอร์ในการแสดงผลกรณีที่มีปัญหาการแสดงภาพ </p></td>
<td width="568" valign="top"><p> </p></td>
</tr>
<tr>
<td colspan="2" valign="top"><p>แจ้งข้อมูลเกี่ยวกับ Plug-ins ที่ใช้กับเว็บให้ละเอียดและครบถ้วน </p> </td>
<td width="568" valign="top"><p> </p></td>
<td width="568" valign="top"><p> </p></td>
</tr>
<tr bgcolor="#FFFFCC">
<td colspan="2" valign="top"><p>กำหนด Template มาตรฐานสำหรับการแสดงผลเนื้อหาในหมวดต่างๆ </p> </td>
<td width="568" valign="top"><p> </p></td>
<td width="568" valign="top"><p> ควรออกแบบ Template สำหรับเอกสารแต่ละหมวด </p></td>
</tr>
<tr>
<td colspan="2" valign="top"><p>แสดงแหล่งที่มาของข้อมูลให้ชัดเจน </p> </td>
<td width="568" valign="top"><p> </p></td>
<td width="568" valign="top"><p> </p></td>
</tr>
<tr bgcolor="#FFFFCC">
<td colspan="2" valign="top"><p>ติด Truehits แยกประเภทหน้าเอกสาร </p> </td>
<td width="568" valign="top"><p> </p></td>
<td width="568" valign="top"><p> </p></td>
</tr>
</table>
</html>
===== เอกสาร =====
* [[http://www.stks.or.th/web/index2.php?option=com_docman&task=doc_view&gid=647&Itemid=31|การพัฒนาเว็บด้วย Joomla]]
* [[http://www.stks.or.th/web/index2.php?option=com_docman&task=doc_view&gid=406&Itemid=31|Web Accessibility]]
* [[http://www.stks.or.th/web/index2.php?option=com_docman&task=doc_view&gid=99&Itemid=31|Metadata]]
* http://www.w3.org/
* http://en.wikipedia.org/wiki/Web_standards
* http://www.maxdesign.com.au/articles/checklist/
* http://webstandardsgroup.org/
* [[web:color-code|ตารางสี]]
===== Online Services =====
* [[http://www.submitexpress.com/analyzer|เครื่องมือตรวจวิเคราะห์ Metadata ของเอกสารเว็บ]]
* [[http://services.nexodyne.com/email/index_custom.php|บริการออนไลน์ช่วยสร้างอีเมลแบบกราฟิก]]
* [[http://www.submitexpress.com/metatags.html|บริการออนไลน์ช่วยสร้างรายการ Web Metatag]]
===== กรณีศึกษา STKS =====
* [[web-standard-stks|ข้อกำหนดของ STKS]]
----
**ผู้เขียน**
* ดร.ทวีศักดิ์ กออนันตกูล รองผู้อำนวยการสำนักงานพัฒนาวิทยาศาสตร์และเทคโนโลยีแห่งชาติ
* บุญเลิศ อรุณพิบูลย์ นักวิชาการ ศูนย์บริการความรู้ทางวิทยาศาสตร์และเทคโนโลยี
{{tag>standard web}}