Differences

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


standard:web 2009/11/04 01:54 standard:web 2010/06/09 04:54 current
Line 33: Line 33:
  - แต่ละเว็บย่อยภายใต้ศูนย์ฯ จะต้องแก้ไขเส้นเชื่อมที่เสีย (Broken Links) ให้แล้วเสร็จภายใน 2 สัปดาห์ นับจากวันที่ได้รับแจ้ง และผู้ดูแลเว็บควรใช้เครื่องมือตรวจ Links ด้วยตนเองอย่างสม่ำเสมอ   - แต่ละเว็บย่อยภายใต้ศูนย์ฯ จะต้องแก้ไขเส้นเชื่อมที่เสีย (Broken Links) ให้แล้วเสร็จภายใน 2 สัปดาห์ นับจากวันที่ได้รับแจ้ง และผู้ดูแลเว็บควรใช้เครื่องมือตรวจ Links ด้วยตนเองอย่างสม่ำเสมอ
  - ทุกๆ หน้าเว็บ ควรจะแสดงข้อมูลต่างๆ (ยกเว้นหน้าเว็บอินทราเน็ต) ดังต่อไปนี้   - ทุกๆ หน้าเว็บ ควรจะแสดงข้อมูลต่างๆ (ยกเว้นหน้าเว็บอินทราเน็ต) ดังต่อไปนี้
-      * ข้อมูลติดต่อหน่วยงาน ได้แก่ ที่อยู่ เบอร์โทรศัพท์ และอีเมล์ +      * ข้อมูลติดต่อหน่วยงาน ได้แก่ ที่อยู่ เบอร์โทรศัพท์ และอีเมล
      * เส้นเชื่อมกลับไปยังหน้าหลักของศูนย์ฯ       * เส้นเชื่อมกลับไปยังหน้าหลักของศูนย์ฯ
      * คำแถลงการณ์สงวนลิขสิทธิ์       * คำแถลงการณ์สงวนลิขสิทธิ์
Line 68: Line 68:
  - เกี่ยวกับหน่วยงาน (About us) เป็นส่วนที่นำเสนอข้อมูลแนะนำหน่วยงานนั้นๆ   - เกี่ยวกับหน่วยงาน (About us) เป็นส่วนที่นำเสนอข้อมูลแนะนำหน่วยงานนั้นๆ
-  - โครงสร้างหน่วยงาน (Organization Structure and Staff Directory) เป็นส่วนที่แนะนำโครงสร้างของหน่วยงาน ว่าแบ่งออกเป็นกี่ระดับ มีใครบ้าง โดยนำเสนอทั้งชื่อ อีเมล์ และเบอร์โทรติดต่อ+  - โครงสร้างหน่วยงาน (Organization Structure and Staff Directory) เป็นส่วนที่แนะนำโครงสร้างของหน่วยงาน ว่าแบ่งออกเป็นกี่ระดับ มีใครบ้าง โดยนำเสนอทั้งชื่อ อีเมล และเบอร์โทรติดต่อ
  - โครงการสำคัญ เป็นส่วนนำเสนอโครงการต่างๆ ของหน่วยงานนั้น ทั้งโครงการที่กำลังอยู่ในขั้นตอนของการดำเนินการ และโครงการที่ดำเนินการเสร็จสิ้นไปแล้ว   - โครงการสำคัญ เป็นส่วนนำเสนอโครงการต่างๆ ของหน่วยงานนั้น ทั้งโครงการที่กำลังอยู่ในขั้นตอนของการดำเนินการ และโครงการที่ดำเนินการเสร็จสิ้นไปแล้ว
  - Site Map เป็นส่วนที่นำเสนอโครงสร้างของเว็บไซต์ของหน่วยงานนั้น   - Site Map เป็นส่วนที่นำเสนอโครงสร้างของเว็บไซต์ของหน่วยงานนั้น
-  - Contact us เป็นส่วนที่นำเสนอข้อมูลเกี่ยวกับวิธีการติดต่อกับหน่วยงานนั้น โดยมีที่อยู่ เบอร์โทรศัพท์หน่วยงาน และอีเมล์ โดยที่อยู่ของอีเมล์ในเว็บเพจ ให้ทำเป็นกราฟิก โดยไม่มี ALT ประกอบ+  - Contact us เป็นส่วนที่นำเสนอข้อมูลเกี่ยวกับวิธีการติดต่อกับหน่วยงานนั้น โดยมีที่อยู่ เบอร์โทรศัพท์หน่วยงาน และอีเมล โดยที่อยู่ของอีเมลในเว็บเพจ ให้ทำเป็นกราฟิก โดยไม่มี ALT mailto:email-address ประกอบ 
 +    * [[http://services.nexodyne.com/email/index_custom.php|บริการออนไลน์ช่วยสร้างอีเมลแบบกราฟิก]]
**คำแนะนำ** **คำแนะนำ**
Line 125: Line 126:
  * เอกสาร 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">   * เอกสาร 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     * การระบุ 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="ชื่อของฟอนต์"> โดยเฉพาะเว็บไซต์ที่มีการใช้ข้อมูลที่เป็นภาษาไทย จะต้องกำหนดชื่อฟอนต์ที่มีอยู่ในเครื่อง Macintosh และ PC พร้อมทั้งระบุขนาดที่เหมาะสมด้วย
    * ในหน้าภาษาไทยกำหนดเป็น <font face=" "Tahoma, MS Sans Serif, Thonburi">...</font>     * ในหน้าภาษาไทยกำหนดเป็น <font face=" "Tahoma, MS Sans Serif, Thonburi">...</font>
Line 158: Line 165:
  * ในการทดสอบการแสดงผล ควรทดสอบที่ความละเอียดของหน้าจออย่างต่ำ 800 x 600 จุด และแนะนำให้ใช้ความละเอียดของหน้าจอ 1024 x 768 จุด เพื่อความเหมาะสมและสวยงามที่สุด   * ในการทดสอบการแสดงผล ควรทดสอบที่ความละเอียดของหน้าจออย่างต่ำ 800 x 600 จุด และแนะนำให้ใช้ความละเอียดของหน้าจอ 1024 x 768 จุด เพื่อความเหมาะสมและสวยงามที่สุด
  * ควรทดสอบระยะเวลาที่ใช้ในการดูเว็บเพจ โดยทดสอบด้วยการใช้โมเด็มความเร็ว 56 kbps ซึ่งเว็บเพจที่พัฒนาขึ้นควรจะเริ่มแสดงผลข้อมูลไม่เกิน 10 วินาทีหลังจากได้รับการร้องขอ (Request) และแสดงผลได้สมบูรณ์ไม่เกิน 30 วินาที เนื่องจากผู้เข้าชมเว็บเพจที่พัฒนาขึ้น อาจจะมาจากต่างสถานที่กัน ใช้โมเด็มความเร็วต่างกัน ผู้พัฒนาควรทดสอบการเข้าชมเว็บเพจ จากโมเด็มที่มีความเร็วที่ครอบคลุมถึงผู้ใช้ส่วนใหญ่   * ควรทดสอบระยะเวลาที่ใช้ในการดูเว็บเพจ โดยทดสอบด้วยการใช้โมเด็มความเร็ว 56 kbps ซึ่งเว็บเพจที่พัฒนาขึ้นควรจะเริ่มแสดงผลข้อมูลไม่เกิน 10 วินาทีหลังจากได้รับการร้องขอ (Request) และแสดงผลได้สมบูรณ์ไม่เกิน 30 วินาที เนื่องจากผู้เข้าชมเว็บเพจที่พัฒนาขึ้น อาจจะมาจากต่างสถานที่กัน ใช้โมเด็มความเร็วต่างกัน ผู้พัฒนาควรทดสอบการเข้าชมเว็บเพจ จากโมเด็มที่มีความเร็วที่ครอบคลุมถึงผู้ใช้ส่วนใหญ่
-  * การตั้งชื่อที่อยู่ของอีเมลของหน่วยงาน ให้ตั้งชื่อเป็นกลาง "webmaster@หน่วยงาน/บริการ.stks.or.th" หรือ "webmaster-หน่วยงาน@stks.or.th" โดยเสนอให้จัดแสดงที่อยู่ของอีเมล ในลักษณะภาพลักษณ์ (Image) เพื่อป้องกันการเก็บรวบรวมอีเมล โดยอัตโนมัติเพื่อการส่งอีเมลขยะ+  * การตั้งชื่อที่อยู่ของอีเมลของหน่วยงาน ให้ตั้งชื่อเป็นกลาง "webmaster@หน่วยงาน/บริการ.stks.or.th" หรือ "webmaster-หน่วยงาน@stks.or.th" โดยเสนอให้จัดแสดงที่อยู่ของอีเมลในลักษณะภาพกราฟิก(Image) เพื่อป้องกันการเก็บรวบรวมอีเมลโดยอัตโนมัติเพื่อการส่งอีเมลขยะ
===== ตารางช่วยวิเคราะห์ ===== ===== ตารางช่วยวิเคราะห์ =====
 +
 +**หมายเหตุเกี่ยวกับตารางนี้**
 +
 +คำว่า "ถูก" หรือ "ผิด" ในที่นี้หมายถึง สอดคล้องตามมาตรฐานนี้ ไม่ได้แปลว่าจะผิดไวยารกรณ์ของการตั้งชื่อไฟล์หรือการสร้างเว็บ ท่านทำผิดแล้วคอมพิวเตอร์จะไม่ยอมทำตาม ระบบของเว็บจะไม่ปรากฏข้อความแสดงปัญหาใดๆไม่ว่าท่านจะทำ "ถูก" หรือ "ผิด"
<html> <html>
Line 175: Line 186:
  <tr bgcolor="#FFFFCC">   <tr bgcolor="#FFFFCC">
    <td colspan="2" valign="top">      <p> ชื่อไฟล์ทุกฟอร์แมตให้ตั้งชื่อเป็นภาษาอังกฤษเท่านั้น </p></td>     <td colspan="2" valign="top">      <p> ชื่อไฟล์ทุกฟอร์แมตให้ตั้งชื่อเป็นภาษาอังกฤษเท่านั้น </p></td>
-    <td width="568" valign="top"><p> ห้องสมุดดิจิทัล.odt ผิด </p> +    <td width="568" valign="top"><p> ห้องสมุดดิจิทัล.odt - ผิด </p> 
-        <p>digital-library.odt ถูก </p></td>+        <p>digital-library.odt - ถูก </p></td>
    <td width="568" valign="top"><p>&nbsp; </p></td>     <td width="568" valign="top"><p>&nbsp; </p></td>
  </tr>   </tr>
  <tr>   <tr>
    <td colspan="2" valign="top">          <p> ให้ใช้ตัวอักษรและตัวเลข โดยไม่มีเครื่องหมายวรรคตอนใดๆ ยกเว้น . และ – เท่านั้น ( ไม่ใช้ space และ underscore “_” เพราะจะสร้างปัญหาเมื่อเป็นส่วนหนึ่งของ URL) </p></td>     <td colspan="2" valign="top">          <p> ให้ใช้ตัวอักษรและตัวเลข โดยไม่มีเครื่องหมายวรรคตอนใดๆ ยกเว้น . และ – เท่านั้น ( ไม่ใช้ space และ underscore “_” เพราะจะสร้างปัญหาเมื่อเป็นส่วนหนึ่งของ URL) </p></td>
-    <td width="568" valign="top"><p>digital_library.odt ผิด </p> +    <td width="568" valign="top"><p>digital_library.odt - ผิด </p> 
-        <p>digital-library.odt ถูก</p>+        <p>digital-library.odt - ถูก</p>
        </td>         </td>
    <td width="568" valign="top"><p>&nbsp; </p></td>     <td width="568" valign="top"><p>&nbsp; </p></td>
Line 189: Line 200:
    <td colspan="2" valign="top"> ควรเป็นคำที่สื่อความหมายสำหรับ <br>     <td colspan="2" valign="top"> ควรเป็นคำที่สื่อความหมายสำหรับ <br>
    Search Engine </td>     Search Engine </td>
-    <td width="568" valign="top"><p>dl.odt ผิด </p> +    <td width="568" valign="top"><p>dl.odt - ผิด </p> 
-        <p>digital-library.odt ถูก </p></td>+        <p>digital-library.odt - ถูก </p></td>
    <td width="568" valign="top"><p>&nbsp; </p></td>     <td width="568" valign="top"><p>&nbsp; </p></td>
  </tr>   </tr>
Line 291: Line 302:
  * [[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=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.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|ตารางสี]]   * [[web:color-code|ตารางสี]]
 +
===== Online Services ===== ===== Online Services =====
-  * http://www.submitexpress.com/analyzer เครื่องมือตรวจวิเคราะห์ Metadata ของเอกสารเว็บ+  * [[http://www.submitexpress.com/analyzer|เครื่องมือตรวจวิเคราะห์ Metadata ของเอกสารเว็บ]] 
 +  * [[http://services.nexodyne.com/email/index_custom.php|บริการออนไลน์ช่วยสร้างอีเมลแบบกราฟิก]]  
 +  * [[http://www.submitexpress.com/metatags.html|บริการออนไลน์ช่วยสร้างรายการ Web Metatag]]
===== กรณีศึกษา STKS ===== ===== กรณีศึกษา STKS =====
Line 307: Line 325:
  * บุญเลิศ อรุณพิบูลย์ นักวิชาการ ศูนย์บริการความรู้ทางวิทยาศาสตร์และเทคโนโลยี   * บุญเลิศ อรุณพิบูลย์ นักวิชาการ ศูนย์บริการความรู้ทางวิทยาศาสตร์และเทคโนโลยี
-{{tag>standard web เอกสารเว็บ}}+{{tag>standard web}}

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