standard:web - STKS Wikibook

Trace: » color-code » thai-encodig-dreamweaver
This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
~~ODT~~

====== มาตรฐานการพัฒนาเว็บไซต์ ======

การพัฒนาเว็บไซต์เป็นช่องทางหนึ่งที่ช่วยสร้างภาพลักษณ์ให้กับองค์กร หน่วยงาน กิจกรรมหรือบุคคล ดังนั้นการออกแบบพัฒนาเว็บไซต์ ต้องคำนึงถึงความพร้อมของผู้ชมเว็บเป็นหลัก คือ ไม่เกิดปัญหาการแสดงผลภาษาไทย โหลดได้เร็ว สืบค้นได้ง่าย รองรับกับเทคโนโลยีส่วนมากของผู้ชมเว็บ ศูนย์บริการความรู้ทางวิทยาศาสตร์และเทคโนโลยี ขอนำเสนอมาตรฐานที่จำเป็นในการออกแบบพัฒนาเว็บไซต์ ดังนี้

<html><p align="center">มาตรฐานการพัฒนาเว็บไซต์สำหรับเว็บไซต์ต่างๆ<br>ในสังกัด...<br>ประกาศ ณ วันที่ ....</p></html>

**หลักการและเหตุผล**

การพัฒนาเทคโนโลยีทางด้านคอมพิวเตอร์ และระบบเครือข่ายคอมพิวเตอร์ที่เกิดขึ้นอย่างต่อเนื่อง ทำให้ความนิยมในการเข้าถึงข้อมูลหรือใช้บริการต่างๆ ในระบบเครือข่ายอินเทอร์เน็ตมีมากขึ้น ด้วยเหตุนี้จึงมีการใช้ระบบเครือข่ายในการนำเสนอข้อมูล หรือติดต่อสื่อสาร หรือประกอบธรกรรมต่างๆ มากขึ้นตามไปด้วย

เพื่อให้การนำเสนอข้อมูลดังกล่าวของหน่วยงานต่างๆ มีคุณภาพสูง สวย ใช้งานได้ดี จาก 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 มาตรฐานทางด้านเทคนิค =====

**ข้อกำหนด**

  * เอกสารเว็บจะต้องมีการกำหนดชื่อของเอกสารหน้านั้น ไว้ในส่วนของแท็ก <title>...</title> โดยชื่อที่กำหนดขึ้นมาควรใช้ภาษาอังกฤษ และต่อท้ายด้วยภาษาไทยได้ และอธิบายถึงภาพรวมของเว็บไซต์นั้นๆ ให้ได้มากที่สุด เพราะชื่อของเอกสารที่กำหนดไว้นี้ จะส่งผลให้โปรแกรมเก็บข้อมูลของเว็บไซต์ที่ให้บริการค้นหาข้อมูล (Search Engine) สามารถตรวจพบ และเก็บชื่อที่กำหนดให้กับเอกสาร เข้าไว้ในระบบฐานข้อมูล เพื่อใช้เป็นคีย์เวิร์ด สำหรับการค้นหาเว็บไซต์ต่อไป (ข้อความที่ระบุใน <title> นี้ไม่ควรยาวเกิน 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>&nbsp; </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>&nbsp; </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>&nbsp; </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 ของเอกสารเว็บด้วยแท็ก &lt;title&gt;…&lt;/title&gt; ให้ถูกต้อง เหมาะสม โดยใช้ภาษาอังกฤษนำ สามารถใช้ภาษาไทยตามได้ </p>      </td>
    <td width="568" valign="top"><p> ใช้เป็นส่วนสำคัญสำหรับ Search Engine </p></td>
    <td width="568" valign="top"><p>&nbsp; </p></td>
  </tr>
  <tr bgcolor="#FFFFCC">
    <td colspan="2" valign="top"><p>Title หลักของเว็บไซต์</p>      </td>
    <td width="568" valign="top"><p>&nbsp; </p></td>
    <td width="568" valign="top"><p>&nbsp; </p></td>
  </tr>
  <tr>
    <td colspan="2" valign="top"><p>Title ของหน้าเว็บเอกสารย่อย</p>      </td>
    <td width="568" valign="top"><p>&nbsp; </p></td>
    <td width="568" valign="top"><p> แบ่งว่ามีเอกสารย่อยอีกหมวด แต่ละหมวดควรใช้ title อะไร </p></td>
  </tr>
  <tr bgcolor="#FFFFCC">
    <td colspan="2" valign="top"><p>กำหนดคีย์เวิร์ดให้กับเอกสาร ด้วยแท็ก &lt; META name=&quot;keywords&quot; content=&quot; คีย์เวิร์ดสำหรับโฮมเพจ&quot;&gt; โดยกำหนดได้มากถึง 100 คำ </p>      </td>
    <td width="568" valign="top"><p> ใช้เป็นส่วนสำคัญสำหรับ Search Engine </p></td>
    <td width="568" valign="top"><p>&nbsp; </p></td>
  </tr>
  <tr>
    <td colspan="2" valign="top"><p>Keyword หลักของเว็บไซต์</p>      </td>
    <td width="568" valign="top"><p>&nbsp; </p>
        </td>
    <td width="568" valign="top"><p>&nbsp; </p></td>
  </tr>
  <tr bgcolor="#FFFFCC">
    <td colspan="2" valign="top"><p>Keyword ของหน้าเว็บเอกสารย่อย </p>      <p align="right">&nbsp; </p></td>
    <td width="568" valign="top"><p>&nbsp; </p></td>
    <td width="568" valign="top"><p> แบ่งว่ามีเอกสารย่อยอีกหมวด <br>
        แต่ละหมวดควรใช้ keyword อะไร </p></td>
  </tr>
  <tr>
    <td colspan="2" valign="top"><p>กำหนดคำอธิบายให้กับเอกสาร ด้วยแท็ก &lt; META name=&quot;description&quot; content=&quot; คำอธิบาย&quot;&gt; </p>      </td>
    <td width="568" valign="top"><p> ใช้เป็นส่วนสำคัญสำหรับ Search Engine </p></td>
    <td width="568" valign="top"><p>&nbsp; </p></td>
  </tr>
  <tr bgcolor="#FFFFCC">
    <td colspan="2" valign="top"><p>Description หลักของเว็บไซต์</p>      </td>
    <td width="568" valign="top"><p>&nbsp; </p>
        </td>
    <td width="568" valign="top"><p>&nbsp; </p></td>
  </tr>
  <tr>
    <td colspan="2" valign="top"><p>Description ของหน้าเว็บเอกสารย่อย </p>      <p align="right">&nbsp; </p></td>
    <td width="568" valign="top"><p>&nbsp; </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 ด้วยคำสั่ง &lt; META http-equiv=&quot;Content-Type&quot; content=&quot;text/html;charset=TIS- 620&quot;&gt; </p>      </td>
    <td width="568" valign="top"><p> เพื่อให้เป็นมาตรฐานตามข้อกำหนด W3C </p></td>
    <td width="568" valign="top"><p>&nbsp; </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>&nbsp; </p></td>
  </tr>
  <tr bgcolor="#FFFFCC">
    <td colspan="2" valign="top"><p>กำหนดคำอธิบายที่สื่อความหมายได้ชัดเจนด้วยแอทริบิวต์ ALT ไว้ภายในแท็ก<br>
&lt;img ...&gt; </p>      </td>
    <td width="568" valign="top"><p> ใช้เป็นส่วนสำคัญสำหรับ Search Engine และเป็นข้อมูลสำหรับเว็บเบราว์เซอร์ในการแสดงผลกรณีที่มีปัญหาการแสดงภาพ </p></td>
    <td width="568" valign="top"><p>&nbsp; </p></td>
  </tr>
  <tr>
    <td colspan="2" valign="top"><p>แจ้งข้อมูลเกี่ยวกับ Plug-ins ที่ใช้กับเว็บให้ละเอียดและครบถ้วน </p>      </td>
    <td width="568" valign="top"><p>&nbsp; </p></td>
    <td width="568" valign="top"><p>&nbsp; </p></td>
  </tr>
  <tr bgcolor="#FFFFCC">
    <td colspan="2" valign="top"><p>กำหนด Template มาตรฐานสำหรับการแสดงผลเนื้อหาในหมวดต่างๆ </p>      </td>
    <td width="568" valign="top"><p>&nbsp; </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>&nbsp; </p></td>
    <td width="568" valign="top"><p>&nbsp; </p></td>
  </tr>
  <tr bgcolor="#FFFFCC">
    <td colspan="2" valign="top"><p>ติด Truehits แยกประเภทหน้าเอกสาร </p>      </td>
    <td width="568" valign="top"><p>&nbsp; </p></td>
    <td width="568" valign="top"><p>&nbsp; </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}}
Views

Personal Tools

Search

Toolbox
