HomepageThai thesesOnline KnowledgesSTKS BlogSTKS WikiS&T NewsContact STKS
หน้าหลัก arrow คลังความรู้ออนไลน์ arrow Web - Internet arrow มาตรฐานการพัฒนาเว็บ

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

Header & Footer

ในการนำเสนอข้อมูลในแต่ละหน้าจะต้องมี Header และ Footer ของเว็บที่้ชัดเจน โดยประกอบด้วยข้อมูลดังต่อไปนี้

Header ประกอบด้วย โลโก้ขององค์กรที่จะลิงค์กลับไปที่หน้าแรกขององค์กร, ชื่อของหน่วยงานที่จะลิงค์ไปที่หน้าแรกของหน่วยงาน, เมนูหลักของเว็บไซต์, และช่องสำหรับค้นหาข้อมูล
Footer ประกอบด้วยข้อความสงวนลิขสิทธิ์ (Copyright) ในการนำข้อมูลในเว็บไซต์ไปใช้ รวมทั้งสถานที่ติดต่อที่ชัดเจน

ประเภทเอกสาร (Document Type)

เอกสารเว็บทุกแฟ้ม จะต้องระบุประเภทเอกสารให้ชัดเจน โดยระบุไว้ต้นเอกสาร และเลือกรูปแบบการระบุได้ 3 ประเภท ดังนี้

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

สำหรับเอกสารที่ยังใช้ภาษา HTML ที่ยืดหยุ่นได้ (แนะนำรูปแบบนี้) 

หรือ

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

สำหรับเอกสารที่เน้นรูปแบบคำสั่งอย่างชัดเจน 

หรือ

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

สำหรับเอกสารเว็บที่พัฒนาด้วย Frame 

ชื่อเว็บไซต์ (Site name)

การสืบค้นเว็บไซต์มักจะใช้ชื่อเว็บไซต์ (Site name หรือ Web title) ดังนั้นผู้พัฒนาเว็บจะต้องมีการกำหนดชื่อของเอกสารเว็บไว้ในแท็ก <title>...</title>  โดย

ชื่อที่กำหนดขึ้นมาควรใช้ภาษาอังกฤษ และอธิบายถึงภาพรวมของเว็บไซต์นั้นๆ ให้ได้มากที่สุด (สามารถต่อท้ายด้วยข้อความภาษาไทย) และไม่ควรยาวเกินกว่า 64 ตัวอักษร ทั้งนี้เพราะชื่อของเอกสารที่กำหนดไว้นี้ จะส่งผลให้โปรแกรมเก็บข้อมูลของเว็บไซต์ที่ให้บริการค้นหาข้อมูล (Search Engine) สามารถตรวจพบ และเก็บชื่อที่กำหนดให้กับเอกสาร เข้าไว้ในระบบฐานข้อมูล เพื่อใช้เป็นคีย์เวิร์ด สำหรับการค้นหาเว็บไซต์ต่อไป
แต่ละหน้าเว็บสามารถกำหนดชื่อเว็บไซต์ได้แตกต่างกัน 

คำค้นของเว็บไซต์ (Keyword)

ควรกำหนดคีย์เวิร์ดให้กับเอกสารนั้น ๆ โดยการใช้แท็ก <meta name="keywords" content="คีย์เวิร์ดสำหรับโฮมเพจ"> ตัวอย่างเช่น <meta name=”keywords” content="STKS, ECTI, Electronics, Computing, Telecommunication, Information”> ซึ่งคีย์เวิร์ดนี้จะเป็นข้อมูลอีกส่วนหนึ่ง ที่โปรแกรมเก็บข้อมูลของเว็บไซต์ค้นหาข้อมูล (Search Engine) บางชนิด เก็บไปทำเป็นคีย์เวิร์ด สำหรับการค้นหาเว็บไซต์ ดังนั้นถ้าต้องการให้เอกสารของถูกตรวจพบโดยเว็บไซต์ ที่เป็น Search Engine หลายๆ ชนิด เราควรจะใส่ทั้งชื่อของเอกสาร และใส่คีย์เวิร์ดในแท็ก <meta name="keywords" …>

รูปแบบการเข้ารหัสภาษา (Character Set & Encoding)

เอกสาร 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">

หลีกเลี่ยงการใช้ Character Set ชุด windows-874  

แบบอักษร (Font)
กำหนดชนิดของฟอนต์ที่ใช้ โดยการใช้แท็ก <font face="ชื่อของฟอนต์"> โดยเฉพาะเว็บไซต์ที่มีการใช้ข้อมูลที่เป็นภาษาไทย จะต้องกำหนดชื่อฟอนต์ที่มีอยู่ในเครื่อง Macintosh และ PC พร้อมทั้งระบุขนาดที่เหมาะสมด้วย
ภาษาไทยควรจะกำหนดเป็น <font face="Tahoma, MS Sans Serif, Thonburi">
ภาษาอังกฤษควรจะกำหนดเป็น <font face=”Arial, Helvetica”>
การใช้แท็ก <font face="..."> นั้น ให้ระบุไว้ที่ตอนต้นของเอกสารครั้งเดียว ไม่ต้องเขียนหลายรอบ เพราะจะเป็นการเพิ่มขนาดของไฟล์เอกสาร HTML โดยไม่จำเป็น ยกเว้นเมื่อมีการใช้แท็ก <TABLE> จะต้องมีการระบุ <font face="..."> ไว้ในทุกๆ หลังแท็ก <TD>
การเปลี่ยนขนาดของฟอนต์ ไม่ต้องกำหนด <font face="..."> ให้ใช้แท็ก <font size="..."> ได้ทันทีหรือใช้ผสม ดังนี้ <font face="..." size="...">...</font>
นอกจากนี้วิธีการใช้ที่ถูกต้องตามมาตรฐานคือ แยกแบบอักษรไประบุใน CSS file โดยมีรูปแบบคำสั่ง คือ
font-family: Tahoma, "MS Sans Serif", Thonburi;
font-size: 14px;
ไม่ควรนำแบบอักษรมาผสมอยู่ในแฟ้มเอกสาร HTML 

คำสั่งซ้อนคำสั่ง

การใช้งานข้อมูลประเภทรายการ หรือตารางในเอกสาร โดยการใช้แท็ก <OL>, <UL>, <DL> และ <TABLE> ไม่ควรใช้ซ้อนกันเกินสองระดับ เพราะอาจเป็นผลทำให้ เอกสารนั้นกว้างเกินหน้าจอ ทำให้เกิดสกรอลล์บาร์ทางด้านล่าง ของโปรแกรมเว็บเบราว์เซอร์ ซึ่งจะทำให้ผู้ใช้ ต้องเลื่อนดูข้อมูลที่ขาดหายไป และยังทำให้การพิมพ์เอกสารหน้านั้นออกมาทางเครื่องพิมพ์ ข้อความบางส่วนจะขาดหายไป (ส่วนที่เกินหน้าจอ)

รูปแบบการเขียน

ในการเขียน HTML นั้น ควรจะเขียนโค้ด ให้เป็นระเบียบ และมีคอมเมนต์ อธิบายไว้เป็นระยะ โดยความยาวของ HTML ในแต่ละบรรทัด ไม่ควรเกิน 80-90 ตัวอักษร เพื่อให้สามารถอ่านข้อมูล และปรับปรุงแก้ไขได้ง่าย นอกจากนั้นการตัดคำภาษาไทยของเอกสารหน้านั้นๆ ยังสามารถทำได้ อย่างถูกต้องอีกด้วย
การตกแต่งเอกสารด้วยภาพ
การนำภาพมาประกอบในเอกสาร โดยการใช้แท็ก <img ...> นั้น จะต้องกำหนดความกว้าง และความสูงที่ถูกต้อง ของภาพนั้นไว้ด้วยเสมอ เพราะจะทำให้การจัดโครงร่างของเอกสาร ทำได้อย่างรวดเร็ว
ถ้ารอบๆ ตำแหน่งที่วางรูปภาพมีตัวอักษร ควรจะกำหนดระยะห่างจากขอบของรูปทุกด้าน โดยการใช้แอทริบิวต์ vspace="ระยะห่างเป็นพิกเซล" hspace="ระยะห่างเป็นพิกเซล" และถ้ารูปนั้นเป็นตัวเชื่อมโยงไปยังเอกสารอื่น ควรจะกำหนดความกว้างของกรอบ โดยใช้แอทริบิวต์ border="ความกว้างเป็นพิกเซล" เช่น  <img alt="VIDEO" src=”http://www.nectec.or.th/graphics/video-56.gif” width=56 height=20 border=0 hspace=3 vspace=3>
ที่สำคัญจะต้องกำหนดแอทริบิวต์ alt ไว้ภายในแท็ก <img ...> เพื่อแสดงข้อความอธิบายสำหรับเว็บบราวเซอร์บางชนิด ที่ไม่สามารถแสดงข้อมูลที่เป็นรูปภาพได้รวมทั้ง แอทริบิวต์ Title ไว้ภายในแท็ก <img ...> เพื่อแสดงข้อความอธิบายสำหรับเว็บบราวเซอร์บางชนิด ที่ไม่สามารถแสดงข้อมูลประกอบภาพได้

 ชื่อแฟ้มและไดเร็กทอรี่

การตั้งชื่อแฟ้มข้อมูลและชื่อไดเร็กทอรี่ ที่ใช้ในการเก็บข้อมูล จะต้องใช้ชื่อภาษาอังกฤษที่ไม่ยาวเกินไปและสื่อความหมาย โดยชื่อประกอบด้วยตัวอักษรตัวเล็ก ไม่มีการเว้นวรรคในระหว่างชื่อ และนามสกุลของไฟล์เอกสาร HTML จะต้องเป็น .html และแฟ้มข้อมูลแรกที่ต้องการให้ผู้เข้าชมเห็นควรจะตั้งชื่อเป็น index.html ในทุกๆ ไดเร็กทอรี่จะต้องมีไฟล์ชื่อนี้อยู่ด้วย เพื่อไม่ให้ผู้ใช้ เห็นแฟ้มข้อมูลทั้งหมดที่อยู่ในไดเร็กทอรี่นั้น เช่น ในไดเร็กทอรี่ที่เก็บภาพควรจะสร้างไฟล์เปล่าๆ แล้วบันทึกไว้ในชื่อ index.html เพื่อไม่ให้ผู้เข้าชม มองเห็นรายชื่อของไฟล์ทั้งหมด ที่อยู่ในไดเร็กทอรี่นั้น

Plug-ins

ผู้เข้าชมเว็บไซต์ควรได้รับแจ้งความต้องการใช้งานโปรแกรม Plug-ins พร้อมทั้งควรมี URL สำหรับดาวน์โหลดได้โดยสะดวก

้ข้อแนะนำอื่นๆ
  1. ในระหว่างการพัฒนาโฮมเพจ ควรจะมีการทดสอบการแสดงผล โดยการใช้ โปรแกรมเว็บบราวเซอร์หลายๆ ชนิด เช่น
    • โปรแกรม Mozilla Firefox บน PC
    • โปรแกรม Internet Explorer บน PC
    • โปรแกรม Mozilla Firefox บน Macintosh
    • โปรแกรม Internet Explorer บน Macintosh
    • ทุกบราวเซอร์ใหม่ๆ ที่สามารถทดสอบได้
  2. ในการทดสอบการแสดงผล ควรทดสอบที่ความละเอียดของหน้าจออย่างต่ำ 800 x 600 จุด
  3. ควรทดสอบระยะเวลาที่ใช้ในการดูเว็บเพจ โดยทดสอบด้วยการใช้โมเด็มความเร็ว 56 kbps ซึ่งเว็บเพจที่พัฒนาขึ้นควรจะเริ่มแสดงผลข้อมูลไม่เกิน 10 วินาทีหลังจากได้รับการร้องขอ (request) และแสดงผลได้สมบูรณ์ไม่เกิน 30 วินาที เนื่องจากผู้เข้าชมเว็บเพจที่พัฒนาขึ้น อาจจะมาจากต่างสถานที่กัน ใช้โมเด็มความเร็วต่างกัน ผู้พัฒนาควรทดสอบการเข้าชมเว็บเพจ จากโมเด็มที่มีความเร็วที่ครอบคลุมถึงผู้ใช้ส่วนใหญ่
  4. การตั้งชื่อที่อยู่ของ email ของหน่วยงาน ให้ตั้งชื่อเป็นกลาง “webmaster@domain-name โดยเสนอให้จัดแสดงที่อยู่ของ email ในลักษณะภาพลักษณ์ (Image) เพื่อป้องกันการเก็บรวบรวม email โดยอัตโนมัติเพื่อการส่ง Junk mails


เรียบเรียงจากคำแนะนำการพัฒนาเว็บไซต์โดย ดร.ทวีศักดิ์ กออนันตกูล
แก้ไขล่าสุดเมื่อ ( Tuesday, 04 August 2009 )
 
< ก่อนหน้า   ถัดไป >








TIAC Science and Technology Knowledge Services: STKS