web standard

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

บุญเลิศบุญเลิศ อรุณพิบูลยอรุณพิบูลย• นักวิชาการ 1• ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี (STKS)• สํานักงานพัฒนาวิทยาศาสตรและเทคโนโลยีแหงชาติ (สวทช.)• ประวัติการทํางาน

– ศูนยเทคโนโลยีอิเล็กทรอนิกสและคอมพิวเตอรแหงชาติ (เนคเทค)• เจาหนาที่ระบบคอมพิวเตอร 3• หัวหนางานพัฒนาเนื้อหาสาระดิจิทัล• หัวหนางานวิชาการ, หัวหนางานเทคนิค

– หนวยปฏิบัติการวิจัยและพัฒนาวิศวกรรมเทคโนโลยีซอฟตแวร– งานพัฒนาเนื้อหาสาระดิจิทัล– ศูนยฝกอบรมคอมพิวเตอรเนคเทค

มาตรฐานเว็บไซตมาตรฐานเว็บไซต

• ดานเทคโนโลยี• ดานการใช• ดานการเขาถึง

มาตรฐานเว็บไซตมาตรฐานเว็บไซต

สวย

เร็ว

คนได

รองรับการเขาถึง

ดานเทคโนโลยีดานเทคโนโลยี

• การแสดงผลบนเบราวเซอร

• ระบบปฏิบตัิการ• ความเร็วในการโอนถายขอมูล

• การนําเสนอดวยเสียงการนําเสนอดวยวีดิทัศน

• ความตองการ Plug-ins

• ฮารดแวร

ดานการใชดานการใช

• ความสม่ําเสมอเกี่ยวกับขอความ และสื่อประกอบตางๆ

• ความสม่ําเสมอในสวน Interface–Layout–Navigator– Icon & Symbol

• ความสม่ําเสมอในการติดตอสื่อสาร

ดานการเขาถึงดานการเขาถึง

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

ความเขาใจผิดบางประการความเขาใจผิดบางประการ

• ควรทําหรอืไม• สิน้เปลืองงบประมาณ• เสียเวลา• ไมคุมคา

Accessibility ไมไดเนนเฉพาะผูที่มีความบกพรองตางๆ เทานั้น แตหมายถึงโอกาสในการเขาถึงของทุกคน (All users)

Server & ClientServer & ClientWindowsXP

IE

Windows2000IE

Macintosh

Windows98Netscape

พัฒนาเว็บดวยHTML Editor,

HTML Generatorบน

Windows

Server :Unix/NT

upload

Server & ClientServer & ClientText Browser

คนพิการ

Mobile Phone

PDA

พัฒนาเว็บดวยHTML Editor,

HTML Generatorบน

Windows

Server :Unix/NT

upload

มาตรฐานที่เกี่ยวของมาตรฐานที่เกี่ยวของ

• มาตรฐานการตั้งชื่อไฟลและ Directory• มาตรฐานทางดานเนื้อหา• มาตรฐานทางดานรูปแบบการใชภาษาบนเว็บ

• มาตรฐานทางดานเทคนิค• มาตรฐานการรักษาความปลอดภัย

การตั้งชื่อไฟลและการตั้งชื่อไฟลและ DirectoryDirectory

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

การตั้งชื่อไฟลและการตั้งชื่อไฟลและ DirectoryDirectory

• ภาษาอังกฤษ ผสมตัวเลข

• ใชเครื่องหมายเฉพาะ –• ไมควรมีชองวาง• ไมควรยาวมากเกินไป

แบบอักษรแบบอักษร (Fonts)(Fonts)

• เลือกใชฟอนตมาตรฐาน– Tahoma– Tahoma, MS Sans Serif, Thonburi– ตระกูล NEW

Tahoma & MS Sans Tahoma & MS Sans SerifSerif

ภาษาไทยภาษาไทย กับการพัฒนากับการพัฒนาเว็บเว็บเพจเพจ

• ดานพัฒนาเว็บ– HTML Editor, Generator แสดงผลภาษาไทย ?– HTML Editor, Generator เขารหัสภาษาไทย ?

• ดานเรียกดูเว็บ– ฟอนต ไมควรสรางภาระใหกบัผูใชงาน– แสดงผลอกัขระไดถูกตอง ทกุ (เกอืบทกุ)

platform

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

กรณีศึกษากรณีศึกษา Macromedia Macromedia DreamweaverDreamweaver

กรณีศึกษากรณีศึกษา Macromedia Macromedia DreamweaverDreamweaver

Decoding Decoding ภาษาไทยภาษาไทยถกูตองหรือไมถกูตองหรือไม

<meta http-equiv=“content-type”content=“text/html; charset=………..”>

TISTIS--620/Windows620/Windows--874874

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

TISTIS--620/Windows620/Windows--874/UTF874/UTF--88

• windows-874 เปน character Set ที่ใชภายในระบบปฏิบัติการทีผ่ลิตโดยบรษิัท ไมโครซอฟต เทานัน้ ไมไดเปน character Set ที่ใชในการแลกเปลี่ยนขอมูลระหวางเครื่อง– มีสวนขยายเพื่อการแสดงผล เชน bullet, smart quote, dash ฯลฯ

• tis-620 เปน character Set ทีจ่ดทะเบียนถูกตอง เปนทีร่ับรูกนัทัว่โลก ทุกระบบปฏิบัติการ (แมแตระบบปฏิบัติการของไมโครซอฟตเอง)

ฐานขอมูลกบัภาษาไทยฐานขอมูลกบัภาษาไทย

• ตองรู Character Set ของฐานขอมูล

FormatFormat

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

• เปนการประหยัดพื้นที่ของสื่อบันทึกขอมูลไดเปนอยางดี

เว็บกราฟกเว็บกราฟก

รูปภาพที่แสดงในโหมดปกติ

การแสดงผลภาพแบบ Interlacedการแสดงผลภาพแบบ Progressive

Interlaced GIFInterlaced GIF

JPEG Quality & JPEG Quality & ProgressiveProgressive

• ภาพฟอรแมต JPG คา Quality ไมควรต่าํ หรอืสูงเกนิไป

• กําหนดรูปแบบการแสดงผลเปนแบบ Progressive ดวยสําหรับภาพที่มีขนาดโต

GIFGIF

• Graphics Interlace File• จํานวนสีและความละเอียดของภาพไมสูงมากนัก

• ตองการพื้นแบบโปรงใส• ตองการแสดงผลแบบโครงรางกอน แลวคอยแสดงผลแบบละเอียด

• ตองการนําเสนอภาพแบบภาพเคลื่อนไหว• สวนขยายคือ .gif

Bit depth drastically Bit depth drastically affects file sizeaffects file size

24 bit color

16 million colors

1.55 MB

8 bit color256

colors518k

8 bit gray

scale256 shades

of gray 518k

1 bit dithered

image 64k

Transparent Transparent GIFsGIFs

Animation GIFAnimation GIF

JPEGJPEG

• Joint Photographer's Experts Group • เหมาะสมกับการนําเสนอทั้งระบบสือ่มัลติมีเดีย และเว็บไซต

• สามารถกําหนดขนาดของไฟลไดตามความเหมาะสม (File Compression)

• สามารถกําหนดคุณสมบัติการแสดงผลแบบหยาบ แลวคอยๆ ละเอียดเมือ่เวลาผานไป ที่เรียกวาคุณสมบัติ Progressive

• สวนขยายของไฟลรูปแบบนี้คือ .jpg หรือ .jpeg

JPEG File FormatJPEG File Format

JPEG - 19KLow Quality

JPEG - 60KMax Quality

PNGPNG

• Portable Network Graphics • รูปแบบลาสุดในการนําเสนอภาพผานเครือขายอินเทอรเน็ต

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

• สวนขยายของไฟลรูปแบบนี้คือ .png

GIF TransparentGIF Transparent

PNG TransparentPNG Transparent

TIFFTIFF

• Tagged-Image File Format • รูปแบบทีใ่ชเกบ็ภาพพรอมรายละเอียดตางๆ เชน เลเยอร (Layer), Annotation, โหมดภาพทั้งระบบ CMYK, RGB, Lab Color ตลอดจนขอมูลประกอบอื่นๆ ตามตนฉบับเดิมของภาพ

• เหมาะสมตอการเกบ็บันทกึภาพตนฉบบั และภาพสําหรับใชประกอบการสรางสื่อสิ่งพมิพ

• สวนขยายของไฟลรูปแบบนี้คือ .tif

สรุปการเลือกใชฟอรแมตสรุปการเลือกใชฟอรแมตภาพภาพ

• ไฟลสกุล GIF (Graphics Interlace File)– ภาพทีไ่มตองการความคมชัดมากนกั สีไมมาก– มีลักษณะพื้นโปรงใส

• ไฟลสกุล JPG (Joint Photographer’s Experts Group)– ภาพทีต่องการความคมชดัสูง มีสีมาก

• ไฟลสกุล PNG (Portable Network Graphics)– ภาพทีต่องการความคมชดัสูง มีสีมากทําพืน้โปรงใสได

GIF / JPEGGIF / JPEG

GIF or JPEG?GIF or JPEG?

7272--ppi and 300ppi and 300--ppippi

Color ModeColor 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)– …

RGB modelRGB model

• RGB model used for lighting, video, and monitors

• So, computer’s monitor only has 3 colors

Red

Green

Blue

CMYK modelCMYK model

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

ลักษณะของหนาเว็บที่ลักษณะของหนาเว็บที่เหมาะสมเหมาะสม

• หนาเว็บที่เหมาะสม ไมมขีอกาํหนดที่ชดัเจน ควรคํานึงถึง– กลุมเปาหมาย (Personal/Business)– ลักษณะของคอมพิวเตอรทีก่ลุมเปาหมายใช (Screen

Area ของจอภาพ)• Screen Area ที่เหมาะสมในปจจุบัน คือ

1024 x 768 pixels• Web Area ทีเ่หมาะสมคือ

– ความยาวไมเกนิ 980 pixel– ความสูงไมมีขอกาํหนดตายตวั แตสวน Header ของเว็บไมควรเกนิครึ่งหนึ่งของพื้นทีท่ี่เหลือ

Truehits.netTruehits.net

ลักษณะของหนาเว็บที่ลักษณะของหนาเว็บที่เหมาะสมเหมาะสม

Web Area 980 pixel

Scre

en A

rea

600

pixe

l

web

Are

a

Template & Layout Template & Layout DesignDesign

TITLE

MenuHistoryDuty

Project

Template & Layout Template & Layout DesignDesign

TITLE

History Duty Project

Template & Layout Template & Layout DesignDesign

TITLE

HistoryDutyProject

Template & Layout Template & Layout DesignDesign

TITLE

History Duty Project

MetadataMetadata

• Data about data• ขอมูลแสดงคุณสมบัติของไฟล หรือวตัถุตางๆ

• แสดงขอมูลสรุปเกี่ยวกบัรายละเอียดของไฟล

• แสดงลิขสิทธิ์ความเปนเจาของ

• แยกกลุมไดตามประเภทของไฟลหรือวัตถุ

• Subject Metadata• Title Metadata• Category Metadata• Keyword Metadata• Author Metadata• Description Metadata• Publisher Metadata• Resource Metadata

บัตรรายการหนังสือบัตรรายการหนังสือ

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

การกาํหนดคุณสมบัติของการกาํหนดคุณสมบัติของเอกสารเอกสาร

• MS – Office– File, Properties..

• OpenOffice.org– File, Properties…

• Acrobat Professional– File, Document Properties…

ประโยชนของประโยชนของ MetadataMetadata

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

Web MetadataWeb Metadata

• Web Title• URL :Uniform

Resource Locator• H1, H2, H3 Tag• Contents• Alternate Text for

Image/Multimedia

• Meta Tag– Description

• เนื้อหา 1 – 2 Kb ของเอกสารเว็บ

– Authors– Keyword– Generator

Web TitleWeb Title

<head><title>NECTEC : Thailand : National Electronics and Computer Technology Center</title>

</head>

เปดดูดวยคําสั่ง View, Source

Web Title & GoogleWeb Title & Google

ไมระบุไมระบุ Web Title Web Title

allintitle:tiac

URLURL

• Uniform Resource Locator• ตําแหนงที่อยูของเว็บไซต• http://www.nectec.or.th/courseware/index.ht

mlProtocol Domain-name Directory Path File

allinurl:tiac

Meta tag: DescriptionMeta tag: Description

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

</head>เปดดูดวยคําสั่ง View, Source

Meta tag: DescriptionMeta tag: Description

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

Meta tag Meta tag อื่นๆอื่นๆ

• Authors, Creator• Keyword• Generator • Robot

– จะระบุไวใน Head Section ของเอกสารเว็บ– ไมปรากฏบนเว็บเบราวเซอรหรอืในเอกสาร– Search Engine เขาถึงได

Author & KeywordAuthor & 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, มหาวิทยาลัยเกษตรศาสตร, เกษตรศาสตร ศาสตรของแผนดิน">

Web Meta TagsWeb Meta Tags

• บรรจุไวใน Head • รปูแบบทั่วไป

<META NAME=“dataname”CONTENT=“datavalue”>

http://http://www.submitexpress.comwww.submitexpress.com/analyze/analyzer/r/

Image SearchImage Search

• Google คนหาภาพไดจาก– คําที่อยูใกลภาพ/ขางเคียงภาพ (adjacent) – Image Caption– Links– Alt Attribute ของ Image Tag– Embedded Metadata

<img src=“aaa.jpg” alt=“Computer System”>

Image MetadataImage Metadata

• Exchangeable Image File Format (Exif) Metadata

– ระบุอตัโนมตัิเมื่อมีการถายภาพดวยกลองดิจิทัล– พัฒนาโดย Japan Electronic Industries

Development Association (JEIDA)

• International Press Telecommunications Council (IPTC) Metadata

– Metadata ที่ผูใชสามารถบนัทึกเพิ่มเติมได– พัฒนาโดย International Press

Telecommunications Council

XNView

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

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

ตัวอยางการตรวจสอบ Metadata ของเอกสารฟอรแมตตางๆ ทั้ง .doc, .ppt, .pdf,และรูปภาพ .jpg ดวยโปรแกรม Catalogue

http://www.download.com/Catalogue/3000-7241_4-10260395.html?tag=lst-0-4

CSS : Standard Web SolutionCSS : Standard Web Solution

• เว็บเบราวเซอรแตละคายกําหนดคําสั่ง HTML และ Attribute แตกตางกันออกไป

• เกิดปญหาในการสรางเอกสารเว็บที่สนบัสนนุกับทุกเบราวเซอร

• เกิดปญหาในการปรับแกไขเอกสารเว็บ• การควบคุมการแสดงผล Tag หรือ Attribute ดวย CSS จึงเปนทางออกที่ W3C แนะนาํ

What is CSS?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

CSS syntax CSS syntax

selector {property: value}

• Selector เปนไดทั้งแท็กคําสั่ง HTML หรือเปนชือ่ที่กําหนดมาใหม ก็ได

• Property คือ Attribute ที่ตองการแสดงผล• แตละ Property จะตองระบุคาการแสดงผล (Value)

CSS syntax CSS syntax

• คั่นระหวาง Property และ value ดวยเครื่องหมาย colon

• และ ลอมรอบดวย { } curly braces

body {color: black}

CSS syntax CSS syntax

• ถา value ประกอบดวยคําหลายคํา (มชีองวางระหวางคํา) ตองใสเครื่องหมายคําพูดกํากับ (quotes)

p {font-family: "sans serif"}p {font-family: tahoma}

CSS syntax CSS syntax • สามารถระบ ุproperty ไดมากกวา 1 โดยใชเครือ่งหมาย

semi-colon แบง

p {text-align : center ; color:red}

เพื อใหอานไดสะดวกควรเปลยีนรูปแบบเปนp {

text-align : center ;

color:red

}

CSS syntax CSS syntax

• สามารถจัดกลุม Selector หลายๆ ตัว เม ื อมี Property เดียวกัน ดวยเครื่องหมาย comma

h1,h2,h3,h4,h5,h6 {color: green}

h1 { color: green}h2 { color: green }h3 { color: green }h4 { color: green }h5 { color: green }h6 { color: green }

Class SelectorClass Selector

• แท็ก HTMl แตละ Tag สามารถกําหนดรูปแบบการแสดงแตกตางกันได โดยการสราง Class selector ดังนี้

p.right {text-align: right}p.center {text-align: center}

• ขึ้นตนดวย Tag ตามดวยจุด และตอดวย Attribute• ไมอนญุาตใหขึ้นตนชือ่ class ดวยตัวเลข

Class SelectorClass Selector

• การใ ชงาน

<p class="right">This paragraph will be right-aligned.</p><p class="center">This paragraph will be center-aligned.</p>

Class SelectorClass Selector

• กรณีที่ Attribute เดียวกัน และ ตองการประกาศใชกับทกุ Tag สามารถกําหนด Certain Class ไดดังนี้

.center {text-align: center}

Class SelectorClass Selector

• การใช Certain Class มีรูปแบบดังนี้

<h1 class="center">This heading will be center-aligned</h1><p class="center">This paragraph will also be center-aligned.</p>

ID SelectorID Selector• Selector ทีไ่มใชแท็กคาํสั่งของ HTML เรยีกวา ID Selector • ประกาศขึ้นตนดวยเครื่องหมาย #• หามใชตัวเลขขึ้นตนชือ่

#green {color: green}

<h1 id="green">Some text</h1><p id="green">Some text</p>

ID SelectorID Selector

• กรณีที่ตองการประกาศเปน Attribute ใหมของ HTML Tag จะใชรูปแบบ ดังนี้

p#para1{text-align: center;color: red}

External Style SheetExternal Style Sheet

• สราง text file• ปอนคําสั่ง css• บันทกึดวยนามสกลุ .css• ประกาศใช css ใน html file ดวยคําสั่ง

<head><link rel="stylesheet" type="text/css"

href="mystyle.css" />

</head>

Web AccessibilityWeb Accessibility

• เว็บไซตที่รองรับความสามารถในการเขาถึงไดในทุกรูปแบบที่เปนมาตรฐาน

• เพื่อเปนหลักประกันไดวาขอมูลสารสนเทศที่เผยแพรนั้น ทุกคนสามารถเขาถึงไดอยางเทาเทียมกัน

• ใชเทคโนโลยีที่เปนมาตรฐานสากล HTML, XHTML, CSS, XML, DOM เปนตน

ผลที่ไดจากผลที่ไดจาก Web AccessibilityWeb Accessibility

• กลุมผูใชผานเครื่อง PDA หรืออุปกรณ Mobile

• กลุมคนพิการ– บกพรองทางการเห็น– บกพรองทางการไดยิน– บกพรองทางการเคลื่อนไหว

• กลุมผูใช Browser ที่แตกตางกัน• กลุมผูใชอินเทอรเน็ตความเร็วต่ํา

กลุมผูพิการกลุมผูพิการ

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

กลุมผูพิการทางการเห็นกลุมผูพิการทางการเห็น

• ตัวอยางโปรแกรมขยายหนาจอ

Alternate TextAlternate Text

Alternate TextAlternate Text

• <IMG SRC=“ชื่อไฟลภาพ”ALT=“คําอธิบายภาพ”>

• คําอธิบายภาพควรสื่อความหมายชัดเจน– Firefox ไมแสดงคําอธิบายภาพ แตทํางานกับ

Attribute TITLEฃ

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"

1. An empty alt attribute (alt=" ") will suffice.

2. "Wikipedia entry for George Washington"

3. "Read More"4. "George Washington"

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 "

1. "Employment Application"2. "PDF File"3. "PDF icon"4. The content of the image is presented

in context, so (alt=" ") is appropriate.

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

สิ่งที่ไมควรทําสิ่งที่ไมควรทํา

1. "next"2. "next page"3. "George Washington's Presidency"4. "Continue to George Washington's

Presidency"

Empty Alt (alt=Empty Alt (alt=“”“”))

• ภาพที่ไมสื่อความหมาย• ภาพที่ถูกตัดเปนหลายชิ้น แตไมมีผลตอการทํางาน

• ภาพ Background

Long DescriptionLong Description

• คําอธิบายแบบยาว– เพิ่ม Attribute LONGDESC=“ชื่อไฟลคําอธิบาย.txt”

– ใหพิมพดวย Notepad แลวบันทึกเปน .txt

คํานึงถึง Thai Encoding & Decoding ดวย

คําอธิบายแบบยาวคําอธิบายแบบยาว Long Long DescriptionDescription

Alt Alt สําหรับสําหรับ FlashFlash

• ระบุ Alt• Description & Shortcut

สีนั้นสําคัญไฉนสีนั้นสําคัญไฉน ??

• ใชสีพื้นและสีตัวอักษรที่แตกตางกัน

สีนั้นสําคัญไฉนสีนั้นสําคัญไฉน ??

http://www.accesskeys.org/tools/color-contrast.html

การลงรหัสที่การลงรหัสที่ไมถกูตองไมถกูตอง

<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>

การลงรหัสทีถ่กูตองการลงรหัสทีถ่กูตอง

Use markup and style sheets and do so properly<h1>This is a heading</h1>

<p>Blah blah blah</p><h1>This is another heading</h1>

<p>Blah blah blah</p><h2>A sub-section</h2>

<p>Blah blah blah</p>

Outline:

•This is a heading•This is another heading

–A sub-section

สรางเอกสารสรางเอกสาร HTML HTML ที่ไดที่ไดมาตรฐานมาตรฐาน

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

ระบุภาษาใหชัดเจนระบุภาษาใหชัดเจน

<p>เมื่อวานมีชาวตางชาติพูดกับฉันวา<span lang=“en”>I love you</span></p>

และระบุภาษาหลักในแท็ก <HTML><html lang="th">

กํากับคํายอกํากับคํายอ

<acronym title="World Wide Web Consortium">W3C</acronym>

<abbr title="World Wide Web Consortium">W3C</abbr>

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

<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>

กลุมผูพิการทางการไดยินกลุมผูพิการทางการไดยิน

• สามารถอานหนังสือได •• เขาใจเนื้อหาจากการอานเขาใจเนื้อหาจากการอาน ??

CaptionsCaptions

• สราง caption ให Movie

Movie

Caption

ระบุระบุ Shortcut KeyShortcut Key

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

PDF Security DocumentPDF Security Document

WatermarkWatermark

• ขอมูลแสดงลิขสิทธิห์รือคุณสมบัติของไฟล • แสดงความเปนเจาของ• แบงไดเปน

– Text Embedded Watermark– Image Embedded Watermark

• มีประโยชนอยางสูงสําหรับ Digital Library, Digital Archive, E-Commerce

Text Embedded Text Embedded WatermarkWatermark

• มีลักษณะเปนขอความทีผ่นวกกับไฟลภาพ • สามารถระบุไดจากโปรแกรม

Adobe PhotoShop จากคําสั่ง File, File info, Copyright & URL

• สามารถคนหาไดจากคําสั่ง Search/Find ของ Windows

Image Embedded Image Embedded WatermarkWatermark

• มีลักษณะเปนภาพทีผ่นวกกับไฟลภาพ • อาจจะเปนภาพโลโกของหนวยงาน, ภาพขอความลิขสิทธิ์

• สามารถระบุไดจากซอฟตแวรประเภท Watermarking Software

Watermark ProcessingWatermark Processing

• Encoding การเขารหัส• Decoding/Detect การตรวจสอบรหัส

– ระบบ Detect สามารถกระทําไดกับภาพที่มกีารลง Watermark และสั่งพมิพบนกระดาษ โดยนําภาพดังกลาวมาสแกน แลวใช Detecting Watermark Software ทําการตรวจสอบ

The Watermark Embedding The Watermark Embedding Process Process

The Watermark Detection The Watermark Detection Process Process

แหลงอางอิงแหลงอางอิง

• http://stks.or.th• http://stks.or.th/elearning• http://webxact.watchfire.com