Web Accessibility

เทคนิคการออกแบบเว็บไซต์ ที่สะดวกในการเข้าถึง โครงการอบรมบุคลากร เพื่อการพัฒนาเว็บไซต์มหาวิทยาลัยมหิดล ประจำปี พ . ศ . ๒๕๕๑

บุญเลิศ อรุณพิบูลย์ ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

มาตรฐานเว็บไซต์ ,[object Object],[object Object],[object Object]

มาตรฐานเว็บไซต์ สวย เร็ว ค้นได้ รองรับ การเข้าถึง

ด้านเทคโนโลยี ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

ด้านการใช้ ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

ด้านการเข้าถึง ,[object Object],[object Object],[object Object],[object Object],[object Object]

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

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

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

มาตรฐานที่เกี่ยวข้อง ,[object Object],[object Object],[object Object],[object Object],[object Object]

การตั้งชื่อไฟล์และ Directory ,[object Object],[object Object],[object Object],[object Object]

แบบอักษร (Fonts) ,[object Object],[object Object],[object Object],[object Object]

ภาษาไทย กับการพัฒนาเว็บเพจ ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

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

กรณีศึกษา Macromedia Dreamweaver

Decoding ภาษาไทย ถูกต้องหรือไม่ <meta http-equiv=“content-type” content=“text/html; charset=tis-620”>

TIS-620/Windows-874 ,[object Object]

TIS-620/Windows-874/UTF-8 ,[object Object],[object Object],[object Object]

ฐานข้อมูลกับภาษาไทย ,[object Object]

Format ,[object Object],[object Object],[object Object]

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

JPEG Quality & Progressive ,[object Object],[object Object]

GIF ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

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

JPEG ,[object Object],[object Object],[object Object],[object Object],[object Object]

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

PNG ,[object Object],[object Object],[object Object],[object Object]

TIFF ,[object Object],[object Object],[object Object],[object Object]

สรุปการเลือกใช้ฟอร์แมตภาพ ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Color Mode ,[object Object],[object Object],[object Object],[object Object],[object Object]

RGB model ,[object Object],[object Object],Red Green Blue

ลักษณะของหน้าเว็บที่เหมาะสม ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

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

Template & Layout Design TITLE Menu History Duty Project

Template & Layout Design TITLE History Duty Project

Metadata ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

บัตรรายการหนังสือ ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

การกำหนดคุณสมบัติของเอกสาร ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

ประโยชน์ของ Metadata ,[object Object],[object Object],[object Object]

Web Metadata ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Web Title <head> <title>NECTEC : Thailand : National Electronics and Computer Technology Center</title> </head> เปิดดูด้วยคำสั่ง View, Source

ไม่ระบุ Web Title

URL ,[object Object],[object Object],[object Object],Protocol Domain-name Directory Path File

Meta tag: Description ,[object Object],[object Object],[object Object],เปิดดูด้วยคำสั่ง View, Source

Meta tag: Description ,[object Object]

Meta tag อื่นๆ ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Author & Keyword ,[object Object],[object Object]

Web Meta Tags ,[object Object],[object Object],[object Object]

http://www.submitexpress.com/analyzer/

Image Search ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],<img src=“aaa.jpg” alt=“Computer System” >

Image Metadata ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],XNView

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

IPTC 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 Solution ,[object Object],[object Object],[object Object],[object Object]

What is CSS? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

CSS syntax ,[object Object],[object Object],[object Object],[object Object]

CSS syntax ,[object Object],[object Object],[object Object]

CSS syntax ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

CSS syntax ,[object Object],[object Object],[object Object],[object Object],[object Object],h1 { color: green} h2 { color: green } h3 { color: green } h4 { color: green } h5 { color: green } h6 { color: green }

Class Selector ,[object Object],[object Object],[object Object],[object Object],[object Object]

Class Selector ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Class Selector ,[object Object],[object Object]

ID Selector ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

External Style Sheet ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Web Accessibility ,[object Object],[object Object],[object Object]

ผลที่ได้จาก Web Accessibility ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

กลุ่มผู้พิการ ,[object Object],[object Object],[object Object],[object Object]

กลุ่มผู้พิการทางการเห็น ,[object Object]

Alternate Text ,[object Object],[object Object],[object Object]

[object Object],[object Object],[object Object],[object Object]

สิ่งที่ไม่ควรทำ ,[object Object],[object Object],[object Object],[object Object]

Empty Alt (alt=“”) ,[object Object],[object Object],[object Object]

Long Description ,[object Object],[object Object],[object Object],คำนึงถึง Thai Encoding & Decoding ด้วย

คำอธิบายแบบยาว Long Description

Alt สำหรับ Flash ,[object Object],[object Object]

สีนั้นสำคัญไฉน ? ,[object Object]

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

การลงรหัสที่ ไม่ถูกต้อง ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

การลงรหัสที่ถูกต้อง ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

สร้างเอกสาร HTML ที่ได้มาตรฐาน ,[object Object]

ระบุภาษาให้ชัดเจน ,[object Object],[object Object],[object Object]

กำกับคำย่อ ,[object Object],[object Object]

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

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

กลุ่มผู้พิการทางการได้ยิน ,[object Object],[object Object]

Captions ,[object Object],Movie Caption

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

Watermark ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Text Embedded Watermark ,[object Object],[object Object],[object Object]

Image Embedded Watermark ,[object Object],[object Object],[object Object]

Watermark Processing ,[object Object],[object Object],[object Object]

The Watermark Embedding Process

The Watermark Detection Process

แหล่งอ้างอิง ,[object Object],[object Object],[object Object]

Web Accessibility

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (19)

Andere mochten auch

Andere mochten auch (8)

Ähnlich wie Web Accessibility

Ähnlich wie Web Accessibility (20)

Mehr von Boonlert Aroonpiboon

Mehr von Boonlert Aroonpiboon (20)

Web Accessibility