การพัฒนาเว็บและการเข้าถึงเนื้อหาตาม Web Accessibility
Download as PPT, PDF0 likes459 views
การพัฒนาเว็บและการเข้าถึงเนื้อหาตาม Web Accessibility
การพัฒนาเว็บและการเข้าถึงเนื้อหาตาม Web Accessibility
- 2. มาตรฐานเว็บไซต์ • ด้านเทคโนโลยี • ด้านการใช้ • ด้านการเข้าถึง
- 3. ด้านเทคโนโลยี • การแสดงผลบนเบราว์เซอร์ • ระบบปฏิบัติการ • ความเร็วในการโอนถ่ายข้อมูล • การนาเสนอด้วยเสียง • การนาเสนอด้วยวีดิทัศน์ • ความต้องการ Plug-ins • ฮาร์ดแวร์
- 4. ด้านการใช้ • ความสม่าเสมอเกี่ยวกับข้อความ และสื่อประกอบต่างๆ • ความสม่าเสมอในส่วน Interface – Layout – Navigator – Icon & Symbol • ความสม่าเสมอในการติดต่อสื่อสาร
- 5. ด้านการเข้าถึง • การเข้าถึงที่ไม่จากัดด้วยความแตกต่างเรื่อง – เวลา – สถานที่ – อุปกรณ์ – กายภาพของผู้เข้าชม
- 6. ความเข้าใจผิดบางประการ Accessibility web คือ เว็บที่คนที่มีปัญหาทางสายตาเข้าถึงได้ ทั้งที่ๆ ควรจะสนับสนุนทั้ง • ผู้ที่มีความบกพร่องทางการได้ยิน • ผู้ที่มีความบกพร่องทางสายตา • ผู้ที่มีความบกพร่องทางร่างกาย • ผู้ที่มีความบกพร่องทางสติปัญญา • บุคคลปกติที่ไม่มีความพร้อมณเวลานั้นๆ
- 7. ความเข้าใจผิดบางประการ • ควรทาหรือไม่ • สิ้นเปลืองงบประมาณ • เสียเวลา • ไม่คุ้มค่า Accessibility ไม่ได้เน้นเฉพาะผู้ที่มีความบกพร่องต่างๆเท่านั้น แต่หมายถึงโอกาสในการเข้าถึงของทุกคน(All users)
- 8. Server & Client WindowsXP IE Windows2000 IE Macintosh Windows98 Netscape พัฒนาเว็บด้วย HTML Editor, HTML Generator บน Windows Server : Unix/NT upload
- 9. Server & Client Text Browser คนพิการ Mobile Phone PDA พัฒนาเว็บด้วย HTML Editor, HTML Generator บน Windows Server : Unix/NT upload
- 10. มาตรฐานที่เกี่ยวข้อง • มาตรฐานการตั้งชื่อไฟล์และ Directory • มาตรฐานทางด้านเนื้อหา • มาตรฐานทางด้านรูปแบบการใช้ภาษาบนเว็บ • มาตรฐานทางด้านเทคนิค • มาตรฐานการรักษาความปลอดภัย
- 11. การตั้งชื่อไฟล์และDirectory • สื่อความหมาย-เข้าใจตรงกัน • สั้นกระชับ • ไม่เกิดความสับสน • ช่วยให้ Search engine ให้ค่าความสาคัญของเว็บไซต์สูงสุด หากคาสาคัญพบเป็นชื่อไฟล์และชื่อ Directory โดยตรง
- 12. การตั้งชื่อไฟล์และDirectory • ภาษาอังกฤษ ผสมตัวเลข • ใช้เครื่องหมายเฉพาะ – • ไม่ควรมีช่องว่าง • ไม่ควรยาวมากเกินไป
- 13. แบบอักษร (Fonts) • เลือกใช้ฟอนต์มาตรฐาน – Tahoma – Tahoma, MS Sans Serif, Thonburi – ตระกูล NEW
- 14. Tahoma & MS Sans Serif
- 15. ภาษาไทยกับการพัฒนาเว็บเพจ • ด้านพัฒนาเว็บ – HTML Editor, Generator แสดงผลภาษาไทย ? – HTML Editor, Generator เข้ารหัสภาษาไทย ? • ด้านเรียกดูเว็บ – ฟอนต์ ไม่ควรสร้างภาระให้กับผู้ใช้งาน – แสดงผลอักขระได้ถูกต้อง ทุก (เกือบทุก) platform
- 19. Decoding ภาษาไทยถูกต้องหรือไม่ <meta http-equiv=“content-type” content=“text/html; charset=………..”>
- 20. TIS-620/Windows-874 • ประเทศไทยมีมาตรฐานอักขระซึ่งกาหนดโดย สานักงานมาตรฐาน อุตสาหกรรม ดังที่เรียกกันโดยทั่วไปว่ารหัส สมอ. แต่รหัส สมอ. หรือที่มีชื่อ ทางการว่า มอก.620 หรือ TIS-620 นี้ เป็นมาตรฐานของประเทศไทย ซึ่งเมื่อ นาไปใช้บนเครือข่ายอินเทอร์เน็ต ก็อาจเกิดความเข้าใจไม่ตรงกันได้ ดังนั้นจึง มีความพยายามที่จะจดทะเบียน รหัส สมอ. ที่ Internet Assigned Numbers Authority (IANA) ซึ่งเป็นผู้ควบคุมมาตรฐานของเครือข่ายอินเทอร์เน็ต และ ได้ดาเนินการจดทะเบียนจนสาเร็จ เมื่อวันที่ 22 กันยายน 2541
- 21. TIS-620/Windows-874/UTF-8 • windows-874 เป็น character Set ที่ใช้ภายในระบบปฏิบัติการที่ผลิต โดยบริษัท ไมโครซอฟต์ เท่านั้น ไม่ได้เป็น character Set ที่ใช้ใน การแลกเปลี่ยนข้อมูลระหว่างเครื่อง – มีส่วนขยายเพื่อการแสดงผล เช่น bullet, smart quote, dash ฯลฯ • tis-620 เป็น character Set ที่จดทะเบียนถูกต้อง เป็นที่รับรู้กันทั่วโลก ทุกระบบปฏิบัติการ (แม้แต่ระบบปฏิบัติการของไมโครซอฟต์เอง)
- 22. ฐานข้อมูลกับภาษาไทย • ต้องรู้ Character Set ของฐานข้อมูล
- 23. Format • รูปแบบของไฟล์ภาพที่ใช้ในการจัดเก็บภาพ • การเลือกรูปแบบที่เหมาะสมต่อการนาเสนอจะช่วยให้ภาพมีขนาด (File Size) เล็กลง โดยคงความคมชัดไว้ในระดับดี • เป็นการประหยัดพื้นที่ของสื่อบันทึกข้อมูลได้เป็นอย่างดี
- 25. Interlaced GIF
- 26. JPEG Quality & Progressive • ภาพฟอร์แมต JPG ค่า Quality ไม่ควรต่า หรือสูงเกินไป • กาหนดรูปแบบการแสดงผล เป็นแบบ Progressive ด้วย สาหรับภาพที่มีขนาดโต
- 27. GIF • Graphics Interlace File • จานวนสีและความละเอียดของภาพไม่สูงมากนัก • ต้องการพื้นแบบโปร่งใส • ต้องการแสดงผลแบบโครงร่างก่อน แล้วค่อยแสดงผลแบบละเอียด • ต้องการนาเสนอภาพแบบภาพเคลื่อนไหว • ส่วนขยายคือ .gif
- 28. Bit depth drastically affects file size 24 bit color 16 millioncolors 1.55 MB 8 bit color 256 colors 518k 8 bit gray scale 256 shades of gray 518k 1 bit dithered image 64k
- 29. Transparent GIFs
- 30. Animation GIF
- 31. JPEG • Joint Photographer's Experts Group • เหมาะสมกับการนาเสนอทั้งระบบสื่อมัลติมีเดีย และเว็บไซต์ • สามารถกาหนดขนาดของไฟล์ได้ตามความเหมาะสม (File Compression) • สามารถกาหนดคุณสมบัติการแสดงผลแบบหยาบ แล้วค่อยๆ ละเอียดเมื่อเวลา ผ่านไป ที่เรียกว่าคุณสมบัติ Progressive • ส่วนขยายของไฟล์รูปแบบนี้คือ .jpg หรือ .jpeg
- 32. JPEG File Format JPEG - 19K Low Quality JPEG - 60K Max Quality
- 33. PNG • Portable Network Graphics • รูปแบบล่าสุดในการนาเสนอภาพผ่านเครือข่ายอินเทอร์เน็ต • สามารถแสดงผลได้ในระบบสีเต็มพิกัด (True Color), มีขนาดไฟล์เล็ก และ ควบคุมคุณภาพได้ตามที่ต้องการ มีการกาหนดให้พื้นภาพเป็นพื้นโปร่งใสได้ (Transparent) รวมทั้งการแสดงผลแบบหยาบสู่ละเอียด (Interlaced) • ส่วนขยายของไฟล์รูปแบบนี้คือ .png
- 34. TIFF • Tagged-Image File Format • รูปแบบที่ใช้เก็บภาพพร้อมรายละเอียดต่างๆ เช่น เลเยอร์ (Layer), Annotation, โหมดภาพทั้งระบบ CMYK, RGB, Lab Color ตลอดจนข้อมูล ประกอบอื่นๆ ตามต้นฉบับเดิมของภาพ • เหมาะสมต่อการเก็บบันทึกภาพต้นฉบับ และภาพสาหรับใช้ประกอบการ สร้างสื่อสิ่งพิมพ์ • ส่วนขยายของไฟล์รูปแบบนี้คือ .tif
- 35. สรุปการเลือกใช้ฟอร์แมตภาพ – ไฟล์สกุล GIF (Graphics Interlace File) • ภาพที่ไม่ต้องการความคมชัดมากนัก สีไม่มาก • มีลักษณะพื้นโปร่งใส – ไฟล์สกุล JPG (Joint Photographer’s Experts Group) • ภาพที่ต้องการความคมชัดสูง มีสีมาก – ไฟล์สกุล PNG (Portable Network Graphics) • ภาพที่ต้องการความคมชัดสูง มีสีมากทาพื้นโปร่งใสได้
- 36. GIF / JPEG
- 37. GIF or JPEG?
- 38. Example of an image at 72-ppi and 300-ppi • 72 ppi = 72 pixels high x 72 pixelswide = 5184 pixels in a square inch • 300 ppi = 300 pixels high x 300 pixels wide = 90,000 pixels in a square inch
- 39. 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) – …
- 40. RGB model • RGB model used for lighting, video, and monitors • So, computer’s monitor only has 3 colors Red Green Blue
- 41. CMYK model • The CMYK model is based on the light-absorbing quality of ink printed on paper.
- 43. Metadata • Data about data • ข้อมูลแสดงคุณสมบัติของ ไฟล์หรือวัตถุต่างๆ • แสดงข้อมูลสรุปเกี่ยวกับ รายละเอียดของไฟล์ • แสดงลิขสิทธิ์ความเป็นเจ้าของ • แยกกลุ่มได้ตามประเภทของ ไฟล์หรือวัตถุ • Subject Metadata • Title Metadata • Category Metadata • Keyword Metadata • Author Metadata • Description Metadata • Publisher Metadata • Resource Metadata
- 45. บัตรรายการหนังสือ 613 สาทิศ อินทรกาแหง ส762ช ชีวจิต : การใช้ชีวิตอย่างเข้าใจธรรมชาติ/ สาทิศ อินทรกาแหง. –พิมพ์ครั้งที่ 10.– กรุงเทพฯ: คลินิกบ้านและสวน, 2541. 130 หน้า ; 21 ซม. ISBN 974-8368-42-4 1. สุขศาสตร์. 2. อาหารธรรมชาติ. 3. ชื่อเรื่อง.
- 46. การกาหนดคุณสมบัติของเอกสาร • MS – Office – File, Properties.. • OpenOffice.org – File, Properties… • Acrobat Professional – File, Document Properties…
- 47. ประโยชน์ของMetadata • เพิ่มประสิทธิภาพการสืบค้นเอกสาร • เป็นข้อมูลให้กับ Search Engine ต่างๆ • การเผยแพร่ในระบบอินเทอร์เน็ต เป็นไปอย่างรวดเร็ว
- 48. Web 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
- 49. Web Title <head> <title>NECTEC : Thailand : National Electronics and Computer Technology Center</title> </head> เปิดดูด ้วยคำสั่ง View, Source
- 50. Web Title & Google
- 52. allintitle:tiac
- 53. URL • Uniform Resource Locator • ตาแหน่งที่อยู่ของเว็บไซต์ • http://www.nectec.or.th/courseware/index.html Protocol Domain-name Directory Path File
- 54. allinurl:tiac
- 55. Meta tag: Description <head> <META NAME="Description" CONTENT="มหำวิทยำลัยเกษตรศำสตร์เป็นสถำบันอุดมศึกษำที่ เปิดสอนหลักสูตรทำงกำรเกษตรแห่งแรกของประเทศไทย ถือกำเนิดมำจำกโรงเรียนฝึกหัดครู ประถมกสิกรรม เมื่อ พ.ศ. 2460 ต่อมำได ้ขยำยและยกฐำนะขึ้นเป็นวิทยำลัยเกษตรศำสตร์และ พัฒนำจนกระทั่งก่อตั้งเป็นมหำวิทยำลัยเกษตรศำสตร์ โดยพระรำชบัญญัติ มหำวิทยำลัยเกษตรศำสตร์ เมื่อวันที่ 2 กุมภำพันธ์ พ.ศ. 2486 ปัจจุบันมหำวิทยำลัยเกษตรศำสตร์ ประกอบด ้วยวิทยำเขตที่เปิดเรียนแล ้ว 5 วิทยำเขต และโครงกำร จัดตั้ง 2 วิทยำเขต"> </head> เปิดดูด ้วยคำสั่ง View, Source
- 56. Meta tag: Description • กรณีที่ไม่ได้ระบุ Description Meta Tag โปรแกรมจะดึงข้อความ 1 – 2 KB จากเว็บไซต์มาแสดงผลแทน
- 57. Meta tag อื่นๆ • Authors, Creator • Keyword • Generator • Robot – จะระบุไว้ใน Head Section ของเอกสารเว็บ – ไม่ปรากฏบนเว็บเบราว์เซอร์หรือในเอกสาร – Search Engine เข้าถึงได้
- 58. 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, มหาวิทยาลัยเกษตรศาสตร์, เกษตรศาสตร์ ศาสตร์ ของแผ่นดิน">
- 59. Web Meta Tags • บรรจุไว้ใน Head • รูปแบบทั่วไป <META NAME=“dataname” CONTENT=“datavalue”>
- 61. Image Search • Google ค้นหาภาพได้จาก – คาที่อยู่ใกล้ภาพ/ข้างเคียงภาพ (adjacent) – Image Caption – Links – Alt Attribute ของ Image Tag – Embedded Metadata <img src=“aaa.jpg” alt=“Computer System”>
- 63. Image Metadata • Exchangeable Image File Format (Exif) Metadata – ระบุอัตโนมัติเมื่อมีการถ่ายภาพด้วยกล้องดิจิทัล – พัฒนาโดย Japan Electronic IndustriesDevelopment Association(JEIDA) • International Press Telecommunications Council (IPTC) Metadata – Metadata ที่ผู้ใช้สามารถบันทึกเพิ่มเติมได้ – พัฒนาโดย International Press TelecommunicationsCouncil XNView
- 64. Exif Metadata โปรแกรมกรำฟิกต่ำงๆ สำมำรถเปิดดูได ้ เช่น ACDSee, XnView โดยคลิกปุ่ มขวำแล ้ว เลือกคำสั่ง Properties…
- 65. IPTC Metadata โปรแกรมกรำฟิกต่ำงๆ อนุญำตให ้เพิ่มข ้อมูลต่ำงๆ ได ้ เช่น ACDSee, XnView
- 66. ตัวอย่ำงกำรตรวจสอบ Metadata ของเอกสำรฟอร์แมตต่ำงๆ ทั้ง .doc, .ppt, .pdf, และรูปภำพ .jpg ด ้วยโปรแกรม Catalogue http://www.download.com/Catalogue/3000-7241_4-10260395.html?tag=lst-0-4
- 67. Web Accessibility • เว็บไซต์ที่รองรับความสามารถในการเข้าถึงได้ในทุกรูปแบบที่เป็น มาตรฐาน • เพื่อเป็นหลักประกันได้ว่าข้อมูลสารสนเทศที่เผยแพร่นั้น ทุกคน สามารถเข้าถึงได้อย่างเท่าเทียมกัน • ใช้เทคโนโลยีที่เป็นมาตรฐานสากล HTML, XHTML, CSS, XML, DOM เป็นต้น
- 68. ผลที่ได้จาก Web Accessibility • กลุ่มผู้ใช้ผ่านเครื่อง PDA หรืออุปกรณ์ Mobile • กลุ่มคนพิการ – บกพร่องทางการเห็น – บกพร่องทางการได้ยิน – บกพร่องทางการเคลื่อนไหว • กลุ่มผู้ใช้Browser ที่แตกต่างกัน • กลุ่มผู้ใช้อินเทอร์เน็ตความเร็วต่า
- 69. กลุ่มผู้พิการ • ผู้พิการทางการเห็น – โปรแกรมช่วยอ่านหน้าจอ – เสียง (TTS), Braille – โปรแกรมขยายหน้าจอ – โปรแกรม Web Browser
- 71. Alternate Text
- 72. Alternate Text • <IMG SRC=“ชื่อไฟล์ภาพ” ALT=“คาอธิบายภาพ”> • คาอธิบายภาพควรสื่อความหมายชัดเจน – Firefox ไม่แสดงคาอธิบายภาพ แต่ทางานกับ Attribute TITLEฃ
- 73. 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"
- 74. 1. An empty alt attribute (alt="") will suffice. 2. "Wikipedia entry for George Washington" 3. "Read More" 4. "George Washington"
- 75. 1. "George Washington" 2. "Painting of George Washington" 3. "Painting of George Washington crossingthe Delaware River" 4. "Painting of George Washington crossingthe 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."
- 76. 1. "Employment Application" 2. "PDF File" 3. "PDF icon" 4. The content of the image is presented in context, so (alt="") is appropriate.
- 77. 1. "decorative line" 2. "Beginning of footer" 3. "separator" 4. alt="" will suffice
- 78. สิ่งที่ไม่ควรทา 1. "next" 2. "next page" 3. "George Washington's Presidency" 4. "Continue to George Washington's Presidency"
- 79. Empty Alt (alt=“”) • ภาพที่ไม่สื่อความหมาย • ภาพที่ถูกตัดเป็นหลายชิ้น แต่ไม่มีผลต่อการทางาน • ภาพ Background
- 80. Long Description • คาอธิบายแบบยาว – เพิ่ม Attribute LONGDESC=“ชื่อไฟล์คาอธิบาย.txt” – ให้พิมพ์ด้วย Notepad แล้วบันทึกเป็น .txt คานึงถึง Thai Encoding & Decoding ด้วย
- 82. Alt สาหรับFlash • ระบุ Alt • Description & Shortcut
- 85. การลงรหัสที่ไม่ถูกต้อง <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>
- 86. การลงรหัสที่ถูกต้อง 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
- 87. สร้างเอกสารHTML ที่ได้มาตรฐาน <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- 88. ระบุภาษาให้ชัดเจน <p>เมื่อวานมีชาวต่างชาติพูดกับฉันว่า<span lang=“en”>I love you</span></p> และระบุภาษาหลักในแท็ก <HTML> <html lang="th">
- 89. กากับคาย่อ <acronym title="World Wide Web Consortium">W3C</acronym> <abbr title="World Wide Web Consortium">W3C</abbr>
- 91. <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>
- 93. Captions • สร้าง caption ให้ Movie Movie Caption