พื้นฐานเบื้องต้นสำหรับเว็บไซต์

Organization of content

Information Architecture

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

Links

• หากสร้างลิงค์ ไปยังเอกสารประเภทอื่นเช่น pdf หรือ doc เป็นต้น ควรใส่วงเล็บเพื่ออธิบายว่าลิงค์จะพาไปยังเอกสารประเภทใด เช่น คู่มือสำหรับผู้ดูแล (pdf) เป็นต้น

Technology

HTML

• แนะนำให้ใช้มาตรฐาน HTML 4.0 หรือ HTML 5.0 และ Cascading Style Sheets (CSS) เพื่อเว็บเพจสามารถนำไปแสดงบนบราวเซอรต่างชนิดกัน สมาพันธ์เวิลด์ไวด์เว็บ (W3C) คือกลุ่มผู้พัฒนามาตรฐาน HTML ได้มีซอฟต์แวร์ที่สามารถตรวจสอบการใช้ HTML ให้ถูกต้องตามมาตรฐานที่ตั้งไว้ ที่ http://validator.w3.org

XHTML

• XHTML เป็นภาษาประเภท Markup Language ที่เกิดจากการนำ XML และ HTML มารวมกัน กลายเป็นมาตรฐานใหม่ของ HTML คำสั่งต่างๆนั้นก็ยังเหมือนกับ HTML แต่จะมีความเข้มงวดในเรื่องโครงสร้างภาษามากกว่า และมีการตัด tag และ attribute ที่ล้าสมัยออกไป
  จากข้อเสียของ HTML ที่เมื่อแสดงผลผ่านเบราเซอร์ของค่ายต่างๆ เช่น Internet Explorer, Firefox, Netscape, Opera และอื่นๆ ได้ผลที่แตกต่างกัน เว็บเพจที่ออกแบบมาอย่างดีของเรา อาจดูสวยงามถูกต้องใน IE แต่กลับผิดเพี้ยนไปเมื่อดูด้วย Firefox
  องค์กร W3C จึงได้นำ HTML 4.0 มาปรับปรุงใหม่ โดยยึดหลักการของ XML และได้เพิ่มกฎเกณฑ์บางอย่าง เพื่อให้การใช้งานมีความเข้มงวด และเป็นมาตรฐานยิ่งขึ้น ซึ่งจะเป็นแนวทางให้เบราเซอร์ค่ายต่างๆ พัฒนาโปรแกรมเว็เบราเซอร์โดยใช้มาตรฐานเดียวกัน รวมไปถึงเว็บเบราเซอร์ที่ติดตั้งบน Platforms ต่างๆ เช่น PDA โทรศัพท์มือถือ ด้วย

Title Tags

• แท็ก title เป็นส่วนสำคัญสำหรับโปรแกรมค้นหาประเภท Search Engine ที่จะนำ title มาสร้างเป็น index และbookmark Title ในแต่ละเพจควรแตกต่างกัน และควรมี descriptive name ในเพจแรกของเว็บไซต์ ตามด้วยชื่อหน่วยงานและมหาวิทยาลัยศรีนครินทรวิโรฒ ข้อความใน Title นั้นควรเป็นข้อความสั้นหรือมีความยาวไม่เกิน 60 ตัวอักษร และควรหลีกเลี่ยงอักขระพิเศษ เช่น เครื่องหมายคำถาม เป็นต้น
• ชื่อ Title ไม่ควรเป็นข้อความต้อนรับ เช่น ขอต้อนรับเข้าสู่หน่วยงาน… เป็นต้น ควรเป็นชื่อที่เริ่มต้นด้วยคำอธิบายเนื้อหาในเว็บเพจโดยเฉพาะ และจบด้วยคำอธิบายทั่วไป ตัวอย่างเช่น

META Tags

• การใช้แท็ก Meta Keyword และ Meta Description ช่วยให้เว็บไซต์สามารถถูกค้นพบได้ คีย์เวิร์ดและคำอธิบายควรสอดคล้องกับเนื้อหาของเว็บเพจนั้นๆ
• แท็ก Meta keyword อธิบายเนื้อหาในเว็บเพจ ควรใช้เป็นวลี 2-3 วลีที่คั่นด้วยเครื่องหมายลูกน้ำ (comma) ขนาดของคำอธิบายควรอยู่ระหว่าง 300 – 500 ตัวอย่างเช่น

<meta name="keywords" content="Srinakharinwirot University, Humanity Faculty, Science Faculty, Graduate School, Computer Center">
• ผลลัพธ์ที่แสดงรายละเอียดจากการค้นหาจะนำเนื้อหามาจาก Meta description แต่ถ้าหากเนื้อหาใน Meta description ยาวเกินไปโปรแกรมค้นหาอาจจะไม่แสดง ดังนั้นความยาวของ description ไม่ควรเกิน 200 อักษร ตัวอย่างเช่น

<meta name="description" content="……..">

------------------

หากต้องการตรวจสอบ meta description และ meta keyword สามารถตรวจได้ที่ Meta Tag Analyzer (http://www.seocentro.com/tools/search-engines/metatag-analyzer.html)โดยกรอก URL ของเว็บไซต์




หรือหากต้องการใช้โปรแกรมสร้างแท็ก meta ให้โดยอัตโนมัติ ลองเยี่ยมชมที่ META TAGS GENERATOR (http://www.submitexpress.com/metatags.html)

------------------

Browsers

• การสร้างเว็บเพจควรตรวจสอบกับบราวเซอร์ที่ใช้กันแพร่หลาย ทั้งบนเครื่อง Mac และ PC

Download Time

• ในบางครั้งผู้เยี่ยมชมเว็บไซต์อาจมาจากผู้ที่ใช้โมเด็มความเร็วต่ำ ซึ่งการออกแบบควรตรวจสอบเวลาโหลดกับโมเด็มความเร็วต่ำ ซึ่งควรทำให้เว็บเพจใช้เวลาดาว์นโหลดต่ำเท่าที่เป็นไปได้ หากใช้เวลามากกว่า 10 -15 วินาทีในการแสดงเว็บเพจแล้วควรตรวจสอบขนาดของภาพในเว็บเพจนั้นว่าใหญ่เกินไปหรือไม่ และหากเป็นไปได้ควรกำหนดความสูงและความกว้างในแท็กรูปภาพเพื่อลดเวลาดาว์นโหลด

Server Side Include Files (SSI)

• ไฟล์ที่ถูกนำมาแนบ (Included File) ส่วนใหญ่เป็นไฟล์ประเภทเมนูหรือลิงค์นำทางไปไฟล์อื่น หรือไฟล์ที่ใส่ภาพต่างๆ ที่ใช้ร่วมกันในเว็บไซต์ ซึ่งไฟล์เหล่านี้จะถูกเรียกใช้จากไฟล์อื่นที่ต้องการนำข้อมูลในไฟล์แนบมาแสดง ประโยชน์ของการแยกไฟล์ออกมาเป็นไฟล์แนบต่างหากนั้น หากต้องการเปลี่ยนแปลงไฟล์แนบนั้นสามารถแก้ไขที่ไฟล์แนบเท่านั้น ไฟล์ที่เรียกใช้ก็จะถูกแก้ไขตาม ในการทำไฟล์แนบนั้นจำเป็นต้องให้เซิร์ฟเวอร์ทราบว่าไฟล์ที่สร้างนั้นคือไฟล์แนบโดยการกำหนดสกุลของไฟล์ให้เป็น .inc หรือ .shtml
  

  ตัวอย่างเช่น

  <!--#include file="includes/homeheader.inc" -->

  หรือ

  <!--#include virtual="includes/homeheader.shtml"-->

ACCESSIBILITY

• เว็บไซต์ที่จัดทำขึ้นควรจะทำตามแนวทางการพัฒนาเว็บที่ทุกคนเข้าถึงได้ที่เรียกว่า Web Content Accessibility Guidelines (WCAG) ของ World Wide Web Consortium (W3C) โดยอาศัยเกณฑ์มาตรฐานฉบับภาษาไทยซึ่งสำนักส่งเสริมและพัฒนาการใช้เทคโนโลยีสารสนเทศและการสื่อสาร สำนักงานปลัดกระทรวงเทคโนโลยีสารสนเทศและการสื่อสารได้กำหนดและประกาศไว้ภายใต้ชื่อ “Thai Web Content Accessibility Guidelines” (TWCAG) เพื่อให้เป็นไปตามมาตรฐานในระดับ A เป็นอย่างน้อย
• รายละเอียดแนวทางการพัฒนาเว็บที่ทุกคนเข้าถึงได้ ดูได้จากเว็บไซต์ SWU Web Help (http://webhelp.swu.ac.th)

CASCADING STYLE SHEETS

• ในการใช้ Cascading Style Sheets นั้นมีประโยชน์และมีคุณสมบัติมากกว่า tag ของ html เช่น
  • การกำหนดกรอบให้ข้อความ รวมทั้งสี รูปแบบของข้อความ
  • CSS นั้นกำหนดที่ต้นของไฟล์ html หรือตำแหน่งอื่น ๆ ก็ได้ และสามารถมีผลกับเอกสารทั้งหมด หมายถึงกำหนดครั้งเดียวจุดเดียวก็มีผลกับการแสดงผลทั้งหมด ทำให้เวลาแก้ไขหรือปรับปรุงทำได้สะดวก ไม่ต้องไล่ตามแก้ tag ต่างๆ ทั่วทั้งเอกสาร
  • CSS สามารถกำหนดแยกไว้ต่างหากจากไฟล์เอกสาร html และสามารถนำมาใช้ร่วมกับเอกสารหลายไฟล์ได้ การแก้ไขก็แก้เพียงจุดเดียวก็มีผลกับเอกสารทั้งหมด

Tables and Nested Tables

• ข้อมูลที่นำมาแสดงในตารางควรนำเสนอในรูปแบบที่เข้าใจง่าย เหมือนการอ่านข้อความในลักษณะย่อหน้าธรรมดา
• การใช้ตารางซ้อนตารงไม่ควรนำตารางมาแทนทั้งคอลัมน์ แต่ควรนำไปวางในเซลล์ใดเซลล์หนึ่งเท่านั้น

ALT Descriptions

• ภาพทุกภาพควรใส่คำอธิบายที่ชัดเจนในแอตทริบิว ALT

Background and Text color

• สีของพื้นหลังและสีของข้อความควรมีความแตกต่างกันให้เหมาะสมสำหรับการอ่าน ตัวหนังสือสีดำและพื้นหลังสีขาวเหมาะสำหรับการอ่านมากที่สุด สามารถตรวจสอบการใช้สีได้ที่ http://www.etre.com/tools/colourcheck/

Check Accessibility

• เราสามารถตรวจสอบการเข้าถึงเว็บไซต์ ที่ http://achecker.ca/checker/

Privacy Policy

• ในการนำเสนอข้อมูลผ่านเว็บนั้นควรคำนึง
  • ข้อมูลส่วนบุคคล
  • การรักษาความปลอดภัยเพื่อป้องกันและดูแลความถูกต้องของข้อมูลส่วนบุคคล

Website Maintenance

• คำถามและอีเมล์ที่ส่งเข้ามาควรได้รับคำตอบที่รวดเร็วและถูกต้อง
• ควรส่งเสริมให้มีการรายงานข้อผิดพลาดด้วยการแสดงข้อความเช่น หากพบข้อผิดพลาดในเว็บไซต์กรุณาติดต่อ webmaster@swu.ac.th เป็นต้น
• เราอาจสร้างแบบฟอร์มตอบกลับ (feedback) เพื่อรับความคิดเห็นของผู้ใช้