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

1. มาตรฐานการออกแบบ
พัฒนาเว็บไซต

2. บุญเลิศ อรุณพิบูลย
• นักวิชาการ 1
• ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี (STKS)
• สํานักงานพัฒนาวิทยาศาสตรและเทคโนโลยีแหงชาติ (สวทช.)
• ประวัติการทํางาน
– ศูนยเทคโนโลยีอิเล็กทรอนิกสและคอมพิวเตอรแหงชาติ (เนคเทค)
• เจาหนาที่ระบบคอมพิวเตอร 3
• หัวหนางานพัฒนาเนื้อหาสาระดิจิทัล
• หัวหนางานวิชาการ, หัวหนางานเทคนิค
– หนวยปฏิบัติการวิจัยและพัฒนาวิศวกรรมเทคโนโลยีซอฟตแวร
– งานพัฒนาเนื้อหาสาระดิจิทัล
– ศูนยฝกอบรมคอมพิวเตอรเนคเทค

3. มาตรฐานเว็บไซต
• ดานเทคโนโลยี
• ดานการใช
• ดานการเขาถึง

4. มาตรฐานเว็บไซต
รองรับ
การเขาถึง
สวย คนได
เร็ว

5. ดานเทคโนโลยี
• การแสดงผลบน • การนําเสนอดวย
เบราวเซอร เสียงการนําเสนอ
• ระบบปฏิบติการ
ั ดวยวีดิทัศน
• ความเร็วในการ • ความตองการ
โอนถายขอมูล Plug-ins
• ฮารดแวร

6. ดานการใช
• ความสม่ําเสมอเกี่ยวกับขอความ และสื่อ
ประกอบตางๆ
• ความสม่ําเสมอในสวน Interface
– Layout
– Navigator
– Icon & Symbol
• ความสม่ําเสมอในการติดตอสื่อสาร

7. ดานการเขาถึง
• การเขาถึงที่ไมจํากัดดวยความ
แตกตางเรือง
่
–เวลา
–สถานที่
–อุปกรณ
–กายภาพของผูเขาชม

8. ความเขาใจผิดบางประการ
• ควรทําหรือไม
• สินเปลืองงบประมาณ
้
• เสียเวลา
• ไมคมคา
ุ
Accessibility ไมไดเนนเฉพาะผูที่มีความบกพรองตางๆ เทานั้น
แตหมายถึงโอกาสในการเขาถึงของทุกคน (All users)

9. Server & Client
upload WindowsXP
IE
Windows2000
IE
พัฒนาเว็บดวย
HTML Editor,
HTML Generator Server : Windows98
บน Unix/NT Netscape
Windows
Macintosh

10. Server & Client
upload Text Browser
คนพิการ
พัฒนาเว็บดวย
HTML Editor,
HTML Generator Server :
Unix/NT PDA
บน
Windows
Mobile Phone

11. มาตรฐานที่เกี่ยวของ
• มาตรฐานการตั้งชื่อไฟลและ Directory
• มาตรฐานทางดานเนื้อหา
• มาตรฐานทางดานรูปแบบการใชภาษา
บนเว็บ
• มาตรฐานทางดานเทคนิค
• มาตรฐานการรักษาความปลอดภัย

12. การตั้งชื่อไฟลและ
Directory
• สื่อความหมาย-เขาใจตรงกัน
• สั้นกระชับ
• ไมเกิดความสับสน
• ชวยให Search engine ใหคา
ความสําคัญของเว็บไซตสงสุด
ู
หากคําสําคัญพบเปนชื่อไฟลและชื่อ
Directory โดยตรง

13. การตั้งชื่อไฟลและ
Directory
• ภาษาอังกฤษ ผสมตัวเลข
• ใชเครื่องหมายเฉพาะ –
• ไมควรมีชองวาง

• ไมควรยาวมากเกินไป

14. แบบอักษร (Fonts)
• เลือกใชฟอนตมาตรฐาน
– Tahoma
– Tahoma, MS Sans Serif, Thonburi
– ตระกูล NEW

15. Tahoma & MS Sans
Serif

16. ภาษาไทย กับการพัฒนา
เว็บเพจ
• ดานพัฒนาเว็บ
– HTML Editor, Generator แสดงผลภาษาไทย ?
– HTML Editor, Generator เขารหัสภาษาไทย ?
• ดานเรียกดูเว็บ
– ฟอนต ไมควรสรางภาระใหกบผูใชงาน
ั
– แสดงผลอักขระไดถูกตอง ทุก (เกือบทุก)
platform

17. HTML Editor
กับการเขารหัสภาษาไทย

18. กรณีศึกษา Macromedia
Dreamweaver

19. กรณีศึกษา Macromedia
Dreamweaver

20. Decoding ภาษาไทย
ถูกตองหรือไม
<meta http-equiv=“content-type”
content=“text/html; charset=………..”>

21. TIS-620/Windows-874
• ประเทศไทยมีมาตรฐานอักขระซึ่งกําหนดโดย สํานักงาน
มาตรฐานอุตสาหกรรม ดังที่เรียกกันโดยทั่วไปวารหัส สมอ.
แตรหัส สมอ. หรือที่มชอทางการวา มอก.620 หรือ TIS-
ี ื่
620 นี้ เปนมาตรฐานของประเทศไทย ซึ่งเมื่อนําไปใชบน
เครือขายอินเทอรเน็ต ก็อาจเกิดความเขาใจไมตรงกันได
ดังนันจึงมีความพยายามที่จะจดทะเบียน รหัส สมอ. ที่
้
Internet Assigned Numbers Authority (IANA) ซึ่งเปนผู
ควบคุมมาตรฐานของเครือขายอินเทอรเน็ต และได
ดําเนินการจดทะเบียนจนสําเร็จ เมื่อวันที่ 22 กันยายน 2541

22. TIS-620/Windows-874/UTF-
8
• windows-874 เปน character Set ที่ใชภายใน
ระบบปฏิบัติการทีผลิตโดยบริษัท ไมโครซอฟต เทานัน
่ ้
ไมไดเปน character Set ที่ใชในการแลกเปลี่ยนขอมูล
ระหวางเครื่อง
– มีสวนขยายเพื่อการแสดงผล เชน bullet, smart quote, dash ฯลฯ
• tis-620 เปน character Set ทีจดทะเบียนถูกตอง เปนทีรับรู
่ ่
กันทัวโลก ทุกระบบปฏิบัติการ (แมแตระบบปฏิบัตการของ
่ ิ
ไมโครซอฟตเอง)

23. ฐานขอมูลกับภาษาไทย
• ตองรู Character Set ของฐานขอมูล

24. Format
• รูปแบบของไฟลภาพที่ใชในการจัดเก็บภาพ
• การเลือกรูปแบบที่เหมาะสมตอการนําเสนอ
จะชวยใหภาพมีขนาด (File Size) เล็กลง
โดยคงความคมชัดไวในระดับดี
• เปนการประหยัดพื้นที่ของสื่อบันทึกขอมูลได
เปนอยางดี

25. เว็บกราฟก
รูปภาพที่แสดงในโหมดปกติ
การแสดงผลภาพ การแสดงผลภาพแบบ Interlaced
แบบ Progressive

26. Interlaced GIF

27. JPEG Quality &
Progressive
• ภาพฟอรแมต JPG คา Quality
ไมควรต่า หรือสูงเกินไป
ํ
• กําหนดรูปแบบการแสดงผล
เปนแบบ Progressive ดวย
สําหรับภาพที่มีขนาดโต

28. GIF
• Graphics Interlace File
• จํานวนสีและความละเอียดของภาพไมสูงมาก
นัก
• ตองการพื้นแบบโปรงใส
• ตองการแสดงผลแบบโครงรางกอน แลวคอย
แสดงผลแบบละเอียด
• ตองการนําเสนอภาพแบบภาพเคลื่อนไหว
• สวนขยายคือ .gif

29. Bit depth drastically
affects file size
8 bit
24 bit 8 bit 1 bit
color gray
color dithered
scale
16 million 256 image
colors 256 shades
colors 64k
of gray
1.55 MB 518k 518k

30. Transparent GIFs

31. Animation GIF

32. JPEG
• Joint Photographer's Experts Group
• เหมาะสมกับการนําเสนอทั้งระบบสือมัลติมีเดีย และ
่
เว็บไซต
• สามารถกําหนดขนาดของไฟลไดตามความ
เหมาะสม (File Compression)
• สามารถกําหนดคุณสมบัตการแสดงผลแบบหยาบ
ิ
แลวคอยๆ ละเอียดเมือเวลาผานไป ที่เรียกวา
่
คุณสมบัติ Progressive
• สวนขยายของไฟลรูปแบบนี้คือ .jpg หรือ .jpeg

33. JPEG File Format
JPEG - 60K JPEG - 19K
Max Quality Low Quality

34. PNG
• Portable Network Graphics
• รูปแบบลาสุดในการนําเสนอภาพผานเครือขาย
อินเทอรเน็ต
• สามารถแสดงผลไดในระบบสีเต็มพิกัด (True
Color), มีขนาดไฟลเล็ก และควบคุมคุณภาพได
ตามที่ตองการ มีการกําหนดใหพื้นภาพเปนพืน
้
โปรงใสได (Transparent) รวมทั้งการแสดงผล
แบบหยาบสูละเอียด (Interlaced)
• สวนขยายของไฟลรูปแบบนี้คือ .png

35. GIF Transparent

36. PNG Transparent

37. TIFF
• Tagged-Image File Format
• รูปแบบทีใชเก็บภาพพรอมรายละเอียดตางๆ เชน เล
่
เยอร (Layer), Annotation, โหมดภาพทั้งระบบ
CMYK, RGB, Lab Color ตลอดจนขอมูลประกอบ
อื่นๆ ตามตนฉบับเดิมของภาพ
• เหมาะสมตอการเก็บบันทึกภาพตนฉบับ และภาพ
สําหรับใชประกอบการสรางสื่อสิ่งพิมพ
• สวนขยายของไฟลรูปแบบนี้คอ .tif
ื

38. สรุปการเลือกใชฟอรแมต
ภาพ
• ไฟลสกุล GIF (Graphics Interlace File)
– ภาพทีไมตองการความคมชัดมากนัก สีไมมาก
่
– มีลักษณะพื้นโปรงใส
• ไฟลสกุล JPG (Joint Photographer’s Experts
Group)
– ภาพทีตองการความคมชัดสูง มีสีมาก
่
• ไฟลสกุล PNG (Portable Network Graphics)
– ภาพทีตองการความคมชัดสูง มีสีมากทําพืนโปรงใสได
่ ้

39. GIF / JPEG

40. GIF or JPEG?

41. 72-ppi and 300-ppi

42. Color Mode
• A color mode determines the color
model used to display and print images.
• Common models include
– RGB (red, green, blue)
– CMYK (cyan, magenta, yellow, black)
–…

43. RGB model
• RGB model used for lighting, video, and
monitors
• So, computer’s monitor only has 3 colors
Red
Green
Blue

44. CMYK model
• The CMYK model is based on the light-
absorbing quality of ink printed on
paper.

45. ลักษณะของหนาเว็บที่
เหมาะสม
• หนาเว็บที่เหมาะสม ไมมขอกําหนดที่ชดเจน
ี ั
ควรคํานึงถึง
– กลุมเปาหมาย (Personal/Business)
– ลักษณะของคอมพิวเตอรทกลุมเปาหมายใช (Screen
ี่
Area ของจอภาพ)
• Screen Area ที่เหมาะสมในปจจุบัน คือ
1024 x 768 pixels
• Web Area ทีเหมาะสมคือ
่
– ความยาวไมเกิน 980 pixel
– ความสูงไมมีขอกําหนดตายตัว แตสวน Header ของเว็บ

ไมควรเกินครึ่งหนึ่งของพื้นทีที่เหลือ
่

46. Truehits.net

48. ลักษณะของหนาเว็บที่
Screen Area 600 pixel เหมาะสม
Web Area 980 pixel
web Area

49. Template & Layout
Design
TITLE
Menu
History
Duty
Project

50. Template & Layout
Design
TITLE
History Duty Project

51. Template & Layout
Design
TITLE
History
Duty
Project

52. Template & Layout
Design
TITLE
History Duty Project

54. Metadata
• Data about data • Subject Metadata
• ขอมูลแสดงคุณสมบัติของ • Title Metadata
ไฟล หรือวัตถุตางๆ • Category Metadata
• Keyword Metadata
• แสดงขอมูลสรุปเกี่ยวกับ
• Author Metadata
รายละเอียดของไฟล
• Description Metadata
• แสดงลิขสิทธิ์ความเปน • Publisher Metadata
เจาของ • Resource Metadata
• แยกกลุมไดตามประเภท
ของไฟลหรือวัตถุ

56. บัตรรายการหนังสือ
613 สาทิศ อินทรกําแหง
ส762ช ชีวจิต : การใชชีวิตอยางเขาใจธรรมชาติ/
สาทิศ อินทรกําแหง. –พิมพครั้งที่ 10.– กรุงเทพฯ:
คลินิกบานและสวน, 2541.
130 หนา ; 21 ซม.
ISBN 974-8368-42-4
1. สุขศาสตร. 2. อาหารธรรมชาติ. 3. ชื่อเรื่อง.

57. การกําหนดคุณสมบัติของ
เอกสาร
• MS – Office
– File, Properties..
• OpenOffice.org
– File, Properties…
• Acrobat Professional
– File, Document Properties…

58. ประโยชนของ Metadata
• เพิ่มประสิทธิภาพการสืบคนเอกสาร
• เปนขอมูลใหกับ Search Engine ตางๆ
• การเผยแพรในระบบอินเทอรเน็ต เปนไป
อยางรวดเร็ว

59. Web Metadata
• Web Title • Meta Tag
• URL :Uniform – Description
Resource Locator • เนื้อหา 1 – 2 Kb ของ
เอกสารเว็บ
• H1, H2, H3 Tag – Authors
• Contents – Keyword
• Alternate Text for – Generator
Image/Multimedia

60. Web Title
<head>
<title>NECTEC : Thailand : National Electronics and
Computer Technology Center</title>
</head>
เปดดูดวยคําสั่ง View, Source

61. Web Title & Google

62. ไมระบุ Web Title

63. allintitle:tiac

64. URL
• Uniform Resource Locator
• ตําแหนงที่อยูของเว็บไซต

• http://www.nectec.or.th/courseware/index.ht
ml
Protocol Domain-name Directory Path File

65. allinurl:tiac

66. Meta tag: Description
<head>
<META NAME="Description" CONTENT="มหาวิทยาลัยเกษตรศาสตรเปนสถาบันอุดมศึกษาที่
เปดสอนหลักสูตรทางการเกษตรแหงแรกของประเทศไทย ถือกําเนิดมาจากโรงเรียนฝกหัดครู
ประถมกสิกรรม เมื่อ พ.ศ. 2460 ตอมาไดขยายและยกฐานะขึนเปนวิทยาลัยเกษตรศาสตรและ
้
พัฒนาจนกระทั่งกอตั้งเปนมหาวิทยาลัยเกษตรศาสตร โดยพระราชบัญญัติ
มหาวิทยาลัยเกษตรศาสตร เมื่อวันที่ 2 กุมภาพันธ พ.ศ. 2486 ปจจุบันมหาวิทยาลัยเกษตรศาสตร
ประกอบดวยวิทยาเขตที่เปดเรียนแลว 5 วิทยาเขต และโครงการ จัดตั้ง 2 วิทยาเขต">
</head>
เปดดูดวยคําสั่ง View, Source

67. Meta tag: Description
• กรณีที่ไมไดระบุ Description Meta Tag
โปรแกรมจะดึงขอความ 1 – 2 KB จาก
เว็บไซตมาแสดงผลแทน

68. Meta tag อื่นๆ
• Authors, Creator
• Keyword
• Generator
• Robot
– จะระบุไวใน Head Section ของเอกสารเว็บ
– ไมปรากฏบนเว็บเบราวเซอรหรือในเอกสาร
– Search Engine เขาถึงได

69. Author & Keyword
<META NAME="Author" CONTENT="Kasetsart
University, Thailand, Bangkok">
<META NAME="Keywords"
CONTENT="Kasetsart University, Thailand,
University, Bangkok, Higher Education, Equality
in Education, Colleges, School, Campuses,
Faculty, มหาวิทยาลัยเกษตรศาสตร, เกษตรศาสตร
ศาสตรของแผนดิน">

70. Web Meta Tags
• บรรจุไวใน Head
• รูปแบบทั่วไป
<META NAME=“dataname”
CONTENT=“datavalue”>

71. http://www.submitexpress.com/analyze
r/

72. Image Search
• Google คนหาภาพไดจาก
– คําที่อยูใกลภาพ/ขางเคียงภาพ (adjacent)
– Image Caption
– Links
– Alt Attribute ของ Image Tag
– Embedded Metadata
<img src=“aaa.jpg” alt=“Computer System”>

74. XNView
Image Metadata
• Exchangeable Image File Format (Exif)
Metadata
– ระบุอตโนมัติเมื่อมีการถายภาพดวยกลองดิจิทัล
ั
– พัฒนาโดย Japan Electronic Industries
Development Association (JEIDA)
• International Press Telecommunications
Council (IPTC) Metadata
– Metadata ที่ผูใชสามารถบันทึกเพิ่มเติมได
– พัฒนาโดย International Press
Telecommunications Council

75. Exif Metadata
โปรแกรมกราฟกตางๆ
สามารถเปดดูได เชน ACDSee,
XnView โดยคลิกปุมขวาแลว
เลือกคําสั่ง Properties…

76. IPTC Metadata
โปรแกรมกราฟกตางๆ
อนุญาตใหเพิ่มขอมูลตางๆ ได
เชน ACDSee, XnView

77. ตัวอยางการตรวจสอบ Metadata ของเอกสารฟอรแมตตางๆ ทั้ง .doc, .ppt, .pdf,
และรูปภาพ .jpg ดวยโปรแกรม Catalogue
http://www.download.com/Catalogue/3000-7241_4-10260395.html?tag=lst-0-4

78. CSS : Standard Web Solution
• เว็บเบราวเซอรแตละคายกําหนดคําสั่ง HTML และ Attribute
แตกตางกันออกไป
• เกิดปญหาในการสรางเอกสารเว็บที่สนับสนุนกับ
ทุกเบราวเซอร
• เกิดปญหาในการปรับแกไขเอกสารเว็บ
• การควบคุมการแสดงผล Tag หรือ Attribute ดวย CSS จึง
เปนทางออกที่ W3C แนะนํา

79. What is CSS?
• CSS stands for Cascading Style Sheets
• Styles define how to display HTML elements
• Styles are normally stored in Style Sheets
• External Style Sheets can save you a lot of
work
• External Style Sheets are stored in CSS files
• Multiple style definitions will cascade into one

80. CSS syntax
selector {property: value}
• Selector เปนไดทั้งแท็กคําสั่ง HTML หรือเปนชือที่
่
กําหนดมาใหม ก็ได
• Property คือ Attribute ที่ตองการแสดงผล
• แตละ Property จะตองระบุคาการแสดงผล (Value)


81. CSS syntax
• คั่นระหวาง Property และ value ดวยเครื่องหมาย
colon
• และลอมรอบดวย { } curly braces
body {color: black}

82. CSS syntax
• ถา value ประกอบดวยคําหลายคํา (มีชองวาง

ระหวางคํา) ตองใสเครื่องหมายคําพูดกํากับ
(quotes)
p {font-family: "sans serif"}
p {font-family: tahoma}

83. CSS syntax
• สามารถระบุ property ไดมากกวา 1 โดยใชเครืองหมาย
่
semi-colon แบง
p {text-align : center ; color:red}
เพือใหอานไดสะดวกควรเปลียนรูปแบบเปน
p{
text-align : center ;
color:red
}

84. CSS syntax
• สามารถจัดกลุม Selector หลายๆ ตัว เมือมี

Property เดียวกัน ดวยเครื่องหมาย comma
h1 { color: green}
h2 { color: green }
h1,h2,h3,h4,h5,h6 h3 { color: green }
{ h4 { color: green }
h5 { color: green }
color: green h6 { color: green }
}

85. Class Selector
• แท็ก HTMl แตละ Tag สามารถกําหนดรูปแบบการ
แสดงแตกตางกันได โดยการสราง Class selector
ดังนี้
p.right {text-align: right}
p.center {text-align: center}
• ขึ้นตนดวย Tag ตามดวยจุด และตอดวย Attribute
• ไมอนุญาตใหขึ้นตนชือ class ดวยตัวเลข
่

86. Class Selector
• การใชงาน
<p class="right">
This paragraph will be right-aligned.
</p>
<p class="center">
This paragraph will be center-aligned.
</p>

87. Class Selector
• กรณีท่ี Attribute เดียวกัน และตองการประกาศใช
กับทุก Tag สามารถกําหนด Certain Class ไดดังนี้
.center {text-align: center}

88. Class Selector
• การใช Certain Class มีรปแบบดังนี้
ู
<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>

89. ID Selector
• Selector ทีไมใชแท็กคําสั่งของ HTML เรียกวา ID Selector
่
• ประกาศขึ้นตนดวยเครื่องหมาย #
• หามใชตัวเลขขึ้นตนชือ
่
#green {color: green}
<h1 id="green">Some text</h1>
<p id="green">Some text</p>

90. ID Selector
• กรณีท่ตองการประกาศเปน Attribute ใหมของ
ี
HTML Tag จะใชรูปแบบ ดังนี้
p#para1
{
text-align: center;
color: red
}

91. External Style Sheet
• สราง text file
• ปอนคําสั่ง css
• บันทึกดวยนามสกุล .css
• ประกาศใช css ใน html file ดวยคําสั่ง
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css" />
</head>

92. Web Accessibility
• เว็บไซตที่รองรับความสามารถในการเขาถึงได
ในทุกรูปแบบที่เปนมาตรฐาน
• เพื่อเปนหลักประกันไดวาขอมูลสารสนเทศที่
เผยแพรนั้น ทุกคนสามารถเขาถึงไดอยางเทา
เทียมกัน
• ใชเทคโนโลยีที่เปนมาตรฐานสากล HTML,
XHTML, CSS, XML, DOM เปนตน

93. ผลที่ไดจาก Web Accessibility
• กลุมผูใชผานเครื่อง PDA หรืออุปกรณ
Mobile
• กลุมคนพิการ
– บกพรองทางการเห็น
– บกพรองทางการไดยิน
– บกพรองทางการเคลื่อนไหว
• กลุมผูใช Browser ที่แตกตางกัน
• กลุมผูใชอินเทอรเน็ตความเร็วต่ํา

94. กลุมผูพิการ

• ผูพิการทางการเห็น
– โปรแกรมชวยอานหนาจอ – เสียง (TTS), Braille
– โปรแกรมขยายหนาจอ
– โปรแกรม Web Browser

95. กลุมผูพิการทางการเห็น

• ตัวอยางโปรแกรมขยายหนาจอ

96. Alternate Text

97. Alternate Text
• <IMG SRC=“ชื่อไฟลภาพ”
ALT=“คําอธิบายภาพ”>
• คําอธิบายภาพควรสื่อความหมายชัดเจน
– Firefox ไมแสดงคําอธิบายภาพ แตทํางานกับ
Attribute TITLEฃ

98. 1. "Image of George Washington"
2. "George Washington, the first
president of the United States"
3. An empty alt attribute (alt="") will
suffice.
4. "George Washington"

99. 1. An empty alt attribute (alt="") will
suffice.
2. "Wikipedia entry for George
Washington"
3. "Read More"
4. "George Washington"

100. 1. "George Washington"
2. "Painting of George Washington"
3. "Painting of George Washington crossing the
Delaware River"
4. "Painting of George Washington crossing the
Delaware River. Swirling waves surround the boat
where the majestic George Washington looks forward
out of the storm and into the rays of light across the
river as he leads his wary troops to battle "

101. 1. "Employment Application"
2. "PDF File"
3. "PDF icon"
4. The content of the image is presented
in context, so (alt="") is appropriate.

102. 1. "decorative line"
2. "Beginning of footer"
3. "separator"
4. alt="" will suffice

103. สิ่งที่ไมควรทํา
1. "next"
2. "next page"
3. "George Washington's Presidency"
4. "Continue to George Washington's
Presidency"

104. Empty Alt (alt=“”)
• ภาพที่ไมสื่อความหมาย
• ภาพที่ถูกตัดเปนหลายชิ้น แตไมมีผลตอการ
ทํางาน
• ภาพ Background

105. Long Description
• คําอธิบายแบบยาว
– เพิ่ม Attribute LONGDESC=“ชื่อไฟลคําอธิบาย.txt”
– ใหพิมพดวย Notepad
แลวบันทึกเปน .txt
คํานึงถึง Thai Encoding
& Decoding ดวย

106. คําอธิบายแบบยาว Long
Description

107. Alt สําหรับ Flash
• ระบุ Alt
• Description & Shortcut

108. สีนั้นสําคัญไฉน ?
• ใชสีพื้นและสีตัวอักษรที่แตกตางกัน

109. สีนั้นสําคัญไฉน ?
http://www.accesskeys.org/tools/color-contrast.html

110. การลงรหัสทีไมถกตอง
่ ไม ู
<p><font size=“+3”><b>This is a
heading</b></font></p>
<p>Blah blah blah</p>
<p><font size=“+3”><b>This is
another heading</b></font></p>
<p>Blah blah blah</p>
<p><font size=“+2”><b>A sub-
section</b></font></p>
<p>Blah blah blah</p>

111. การลงรหัสทีถกตอง
่ ู
Use markup and style sheets and do so properly
<h1>This is a heading</h1> Outline:
<p>Blah blah blah</p>
<h1>This is another heading</h1>a heading
•This is
•This is another heading
<p>Blah blah blah</p> –A sub-section
<h2>A sub-section</h2>
<p>Blah blah blah</p>

112. สรางเอกสาร HTML ที่ได
มาตรฐาน
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

113. ระบุภาษาใหชัดเจน
<p>เมือวานมีชาวตางชาติพูดกับฉันวา<span
่
lang=“en”>I love you</span></p>
และระบุภาษาหลักในแท็ก <HTML>
<html lang="th">

114. กํากับคํายอ
<acronym title="World Wide Web
Consortium">W3C</acronym>
<abbr title="World Wide Web
Consortium">W3C</abbr>

115. ระบุ id ใหกับหัวเรื่องตาราง

116. <tr>
<th id="t1">ชื่อ</th>
<th id="t2">อายุ</th>
<th id="t3">สถานที่เกิด</th>
<th id="t4">สถานที่ทํางาน</th>
</tr>
<tr>
<td headers="t1">น้ําหนึ่ง</td>
<td headers="t2">29</td>
<td headers="t3">กรุงเทพฯ</td>
<td headers="t4">เนคเทค</td>
</tr>
<tr>
<td headers="t1">ยุทธการ</td>
<td headers="t2">28</td>
<td headers="t3">หนองคาย</td>
<td headers="t4">เนคเทค</td>
</tr>

117. กลุมผูพิการทางการไดยิน

• สามารถอานหนังสือได
• เขาใจเนื้อหาจากการอาน ?

118. Captions
• สราง caption ให Movie
Movie
Caption

119. ระบุ Shortcut Key

120. ลําดับการเลื่อนในแบบฟอรม

121. PDF Security Document

122. Watermark
• ขอมูลแสดงลิขสิทธิหรือคุณสมบัติของไฟล
์
• แสดงความเปนเจาของ
• แบงไดเปน
– Text Embedded Watermark
– Image Embedded Watermark
• มีประโยชนอยางสูงสําหรับ Digital Library,
Digital Archive, E-Commerce

125. Text Embedded
Watermark
• มีลักษณะเปนขอความทีผนวกกับไฟลภาพ
่
• สามารถระบุไดจากโปรแกรม
Adobe PhotoShop จากคําสั่ง File, File
info, Copyright & URL
• สามารถคนหาไดจากคําสั่ง Search/Find
ของ Windows

126. Image Embedded
Watermark
• มีลักษณะเปนภาพทีผนวกกับไฟลภาพ
่
• อาจจะเปนภาพโลโกของหนวยงาน, ภาพ
ขอความลิขสิทธิ์
• สามารถระบุไดจากซอฟตแวรประเภท
Watermarking Software

127. Watermark Processing
• Encoding การเขารหัส
• Decoding/Detect การตรวจสอบรหัส
– ระบบ Detect สามารถกระทําไดกับภาพที่มการ
ี
ลง Watermark และสั่งพิมพบนกระดาษ โดยนํา
ภาพดังกลาวมาสแกน แลวใช Detecting
Watermark Software ทําการตรวจสอบ

128. The Watermark Embedding
Process

129. The Watermark Detection
Process

130. แหลงอางอิง
• http://stks.or.th
• http://stks.or.th/elearning
• http://webxact.watchfire.com