web standard
DESCRIPTION
มาตรฐานการออกแบบพัฒนาเว็บไซต์TRANSCRIPT
มาตรฐานการออกแบบมาตรฐานการออกแบบพัฒนาเว็บไซตพัฒนาเว็บไซต
บุญเลิศบุญเลิศ อรุณพิบูลยอรุณพิบูลย• นักวิชาการ 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