W3C XHTML การ valid มาแชร์กันจ้า

[ej_sing]

เนื่องจาก ไปอ่านเว็บ thaicss.com มา เพราะเริ่มศึกษา css รวมถึงอ่านที่นี่ด้วย ความรู้แน่นกันจริงๆ 
ทีนี้ มันเริ่มลาม เพราะไปอ่านเจอเรื่อง W3C มาตรฐานเว็บที่ควรจะเป็น 

ก็เลยคึกพอสมควร และบ้าพลัง เลยตัดสินใจ รื้อทิ้งเว็บหนึ่งที่ดูแลอยู่ เพราะอยากลองทำ
โดย ประกาศกับตัวเองว่า

จะเอาให้ผ่าน W3C แบบได้คำนี้มา "This Page Is Valid XHTML 1.0 Transitional!"
และก็ CSS รวมไปถึง WAI-AAA WCAG 1.0

โดย ทุกหน้าของเว็บ ต้องผ่านหมด บางเว็บผ่านแค่หน้าแรก 
ไม่เอา จะเอาทุกหน้า 

มาแบ่งปันวิธีแก้ปัญหากันครับ ผมเพิ่งลองประมาณ 2 อาทิตย์ ได้มานิดหน่อย

-------------------------------------------------------------------------------------------
เริ่มแบ่งปันด้วยการ สอนจรเข้ว่ายน้ำให้ไปซื้อมะพร้าวห้าวมาขายสวน นะครับ 
-------------------------------------------------------------------------------------------

ขั้นตอนแรกที่จะเริ่มเดินทางสายมรณะ
ควรจะใช้ firefox browser ครับ สะดวกมากๆ ถึงมากที่สุด และ มันสะดวกจริงๆนะเอ้า สะดวกยังไง
เพราะมันมีตัว อทช web developer ซึ่งหลายท่านที่นี่รู้จักกันดีอยู่แล้ว (ผมมารู้จัก ที่นี่แหล่ะ)



จากรูปบน คือเปิดการใช้งาน display page validation ในตัว web developer



จากรูปบน เราจะเห็นแทปเพิ่มขึ้นมา มี page validation HTML: xxx CSS:xxx Accessbility: xxx

อีส่วนนี้แหล่ะครับ Validation สำหรับ html xhtml css
จะเห็นว่ามันสามารถ validdate online หน้าเว็บนั้นๆได้เลย โดยไม่ต้องเข้าเวบ W3C.org ให้เมื่อยตุ้ม
และอีกอย่างนึงครับที่สะดวกมากๆ valid ผ่าน localhost ในเครื่อง ของเราได้เลย (ต้องต่อเน็ท)
โดยเวบหลักไม่สามารถทำได้ครับ(ลองแล้วไม่ได้น่ะครับ )

เอาล่ะครับ ลองไปเปิด เว็บต่างๆเล่นๆดูครับ ว่า เอ๋อเร๋อ กันกระจุยกระจายขนาดไหน 

เดี๋ยวมาต่อครับ

[iannnnn]

+ มาแนวความรู้แบบนี้ชอบครับ



(แต่ส่วนตัวคือ รู้สึกว่าอยากทำเว็บให้มนุษย์ดูครับ ไม่ได้ให้หุ่นยนต์ดู ก็เลยแกล้งลืมๆ ไป)

[ยุนเอ]

มารอดูเลยครับ

บมค่าชวก ครับ 

[ej_sing]

ตอนนี้เว็บที่ผมลองทำอยู่ โดยรวม รุ่นทดลอง เสร็จไปแล้ว 40% ก็หลายสิบหน้าอยู่ (แบบไดนามิค)
โดยทุกหน้า ผม Validate ผ่านผมด เขียวสองอันอย่างที่เห็นน่ะครับ



-----------------------------------------------------------------------------------

แน่นอน รูปแบบเว็บเป็นแบบ แยกเนื้อหา กับ ดีไซน์
เป็น PHP+ XHTML 1.0  Transitional และ CSS


การประกาศ Doctype ส่วนแรกที่สำคัญห้ามมองข้าม
XHTML 1.0  Transitional กับ Strict หรืออื่นๆนั้นต่างกันอย่่างไร ควรเป็นแบบไหน อ่านที่นี่ครับ thaicss.com

ปัญหาแรกเลยที่เจอคือโค้ดโปรแกรมของ php
การส่งผ่านตัวแปรต่างๆผ่าน get แบบต่อท้าย url พวก index.php?id=xx&page=xx

ปรกติบางคนที่ใช้ editor ทั้งหลายแหล่แบบลุ่นๆ อาจจะเขียนแบบนี้ เช่น

โค้ด เลือกทั้งหมด ขยายเนื้อหา

<a href="index.php?id=xx&page=xx">link</a>

แบบนี้ ไม่ผ่านครับ ผิดหนึ่งตัวอักษร และถ้าผิดสักตัวอักษรล่ะก็
มันจะฟ้องเอ๋อเร๋อ ลามปามไปมั่วหมดเลย ตรงนู้นตรงนี้ก็ผืิดไปหมด (แม่งเมาแน่ๆ ตูเขียนถูกแล้วเฟ้ย  )

ก็ผิดจริงแหล่ะครับ ผิดตัวเดียวที่ตัวอักษร "&" ครับ ที่ถูกต้องแบบนี้ครับ

<a href="index.php?id=xx&amp;page=xx">link</a>

ต้องใส่เป็นโค้ดตัวอักษรพิเศษด้วยครับ แบบที่ดรีมมันชอบใส่ให้น่ะครับ

และถ้าแก้เพียงหนึ่งตัวอักษร บางครั้ง มันจะลด error ได้จาก สามสิบ กลายเป็น สิบแปด ก็เป็นได้ครับ 

เรื่องอักขระพวกนี้โปรๆขึ้นมาหน่อย ก็รู้แหล่ะครับ
พอดีเพิ่งหัดเขียน PHP+CSS+XHTML เลยเอาเรื่องที่เจอๆมาบอกกันน่ะครับ
เอ้าใครเก่งๆเรื่องนี้มาแจมๆกันเร้ววว ผมเพิ่งหัดคลานเน้อ สองอาทิตย์เอง

[ยุนเอ]

เรื่องอักขระพิเศษนี้ละครับ เยอะเลย 

> < & ^ # @ ! $ บลาๆ 

[ej_sing]

ความเห็นส่วนตัวเหมือนคุณแอนนนนน 100% เลยแหล่ะครับ   
และเซ็งเรื่องมาตรฐานที่ไม่ยอมเท่ากันซะทีเรื่อง browser
ก็เลยอยากลอง ทำสิ่งที่มนุษย์ดูนี่แหล่ะ แต่บังคับให้ไอ้หุ่นเฮงซวยนั่นเข้าใจครับ

อ๊ะ  พอๆ ต่อๆๆ

เรื่องอักขระ น่าเป็นห่วงสำหรับ PHP ก็พวกนั้นแหล่ะครับ
&gt; = >
&lt; = <
&amp; = &
หากต้องการแสดงผลบนหน้าเว็บ ต้องเขียนตามนั้น
หากจะเขียนในส่วนโปรแกรม php ก็เขียนปกติ

ผมเขียนบรรทัดนึง เช็คทีนึึง  คือเขียนเยอะๆแล้วงงได้ใจเลยครับ
ถึงบอกว่า อทช ตัวนี้สะดวกมากๆที่จะลองทำเว็บแบบ xhtml

เดี๋ยวมาต่อ เรื่องที่ปวดหัวๆเจอๆมาครับ

[ยุนเอ]

อ๋อ เงาไว้ไม่ทันอ่าน

พอเข้า web 3.0 นะมันจะเอาไอมาตรฐานนี้มาใช้ในการโยงใยไซเบอร์ให้เราเลยอะ 

แต่ว่า แก้เกือบหมดทุกเว็บเลยนะ 

[ej_sing]

การปิด tag สำคัญ บาง tag
เช่น
พวก meta name ปกติ HTML 4.01 Transitiona เราก็ปิดแบบนี้ได้

โค้ด เลือกทั้งหมด ขยายเนื้อหา

<meta name="Description" content="xxxxxxxxx">
แต่ถ้า xhtml ต้องปิดแบบนี้

<meta name="Description" content="xxxxxxxxx" />

อันนี้ไม่ค่อยเป็นปัญหาเท่าไรครับ เพราะใช้ดรีมช่วยได้หากลืมใส่ที่ tag สำคัญๆบางอัน พวก link rel ,meta name
โดยการ เปลี่ยนกลับไปมา ที่ page property > title/encoding > document type (DTD)
มันจะออโต้ใส่ให้เองครับ

ส่วนพวกที่ชอบลืม จะเป็นพวก ที่เขียนขึ้นเอง อย่าง

<img src="xxxx" alt="xxxx" height="xx" width="xx" />

นี่แหล่ะครับ ตัวดีที่ชอบลืม

พวกช่องว่างบางช่อง ก็ควรใส่ &nbsp; ไว้กันเหนียวเช่นพวก

โค้ด เลือกทั้งหมด ขยายเนื้อหา

<div class="empty">&nbsp;</div> หากวาง div ว่างๆ ก็ใส่ไว้หน่อยครับ

และก็ CSS พวก ID ทั้งหลายอย่าเอามาซ้ำกัน ใน 1 หน้าควรมีี ID นั้นอันเดียวครับ
ถ้าต้องการใช้ซ้ำให้ประกาศเป็น class ครับ (อันนี้รู้กันอยู่แล้วหรือปล่าว ผมเพิ่งมารู้ตอนทำ validate นี่ล่ะ  )


เอ้าใครมีประสบการณ์มาช่วยกันหน่อยครับ

[iannnnn]

เจี๊ยก ตูใช้ ID ซ้อนกันตลอดเลยนะ
ไม่รู้เลยว่า ID กะ Class มันต่างกันยังไง

[ej_sing]

 

ลอง validate ดูสิครับ แล้วจะพบความสุขมหาโหด
ถ้าไม่อยากแก้ อย่าไปเดทมันครับ ช้ำใจปล่าวๆ
อย่างฟอรั่มหน้านี้ Invalid: 89 errors  แล้วเป็นไง  ก็แสดงผลได้ดีไม่มีเพี้ยน

ไม่ต้องไปสนมันอย่างที่ตั้งใจแหล่ะครับ ดีแล้ว
ผมลองทำแค่เว็บเดียว เอาความรู้แหล่ะครับ (ตังค์ก็ไม่ได้ แต่แลกกับความรู้น่ะครับ)
ทำเอามันส์ครับ 

ID กับ class ยังไม่แตกฉานเลยครับ
เท่าที่รุ้ล่าสุดก็ ไม่ควรซ้ำ ID ในหนึ่งหน้า แต่ class ซ้ำได้ เอามาต่อยอดได้

[iannnnn]

คือ อีกไม่นานก็คงต้องดำเนินตามรอยมาตรฐานแหละครับ
แต่ปัจจุบันนี้เอาแค่พอถูไถไปก่อน ให้ตามมาตรฐานเด๊ะๆ นี่คงหอบแดร๊กแน่เลย

[i-poon]

เข้ามาบวกครับ 

โดยส่วนตัวผมก็อยากทำเว็บตามมาตรฐานนะ
แต่เวลาศึกษาบทความเกี่ยวกับ web standard ทีไรก็เกิดอาการขี้เกียดขึ้นมาอัตโนมัติ 

[ej_sing]

หอบสุดๆเลยล่ะครับ ยิ่งเอามารวมกะ PHP ด้วยนะโหยยยย ไหนจะประสาทกินกะ CSS อีก
ถ้ารับจ้างทำนี่ อาจต้องบวกราคาเพิ่มครับ



ประมาณว่า

แอนนนนน : "คุณลูกค้าครับ อยากได้ โลโก้แบบนี้ไว้มั๊ยครับ เพราะมันมาตรฐาน ดีอย่างโน้น ..... bla bla bla....."
คุณลูกค้า : "เออ เอาสิๆๆๆ ดีออก มันสมควรแบบนั้นแหล่ะ ตกลงๆ ผมเอา ทำแบบมาตรฐานนะ"
แอนนนนน :"ขอบวกเพิ่ม 10000 นะครับ เพราะยุ่งยากมาก กว่าจะขึ้นมาตรฐานครับ"
คุณลูกค้า : " .......    ไม่เป็นไรๆ ไม่ต้องมาตรฐานก็ได้ เอาแค่ดูได้พอแล้ว"
แอนนนนน : " "

[iannnnn]

ขอแก้บรรทัดสุดท้ายเป็น ครับ

[ej_sing]

แอนนนนน : "คุณลูกค้าครับ อยากได้ โลโก้แบบนี้ไว้มั๊ยครับ เพราะมันมาตรฐาน ดีอย่างโน้น ..... bla bla bla....."
คุณลูกค้า : "เออ เอาสิๆๆๆ ดีออก มันสมควรแบบนั้นแหล่ะ ตกลงๆ ผมเอา ทำแบบมาตรฐานนะ"
แอนนนนน :"ขอบวกเพิ่ม 10000 นะครับ เพราะยุ่งยากมาก กว่าจะขึ้นมาตรฐานครับ"
คุณลูกค้า : "  .......     ไม่เป็นไรๆ ไม่ต้องมาตรฐานก็ได้ เอาแค่ดูได้พอแล้ว"
แอนนนนน : "  "

อ๊ะ    ออกนอกเรื่องอยู่เรื่อย ต่อๆ

เห็นโลโก้ด้านบนใช้ใหมครับ อันสุดท้ายคือ WAI WACG
ไอ้อันนี้แหล่ะครับ ส่วนสำคัญพอสมควรเลยล่ะ

แว่วๆว่า บางแห่ง (ที่ไหนล่ะ ... นั่นน่ะสิ )  อ่านเจอผ่านๆ มาครับ
เกี่ยวกับสิทธิการเข้าถึงเว็บไซท์นั้นๆ เพื่อให้คนทุกระดับเข้าถึงได้โดยเท่าเทียมกัน
จึงสร้างมาตรฐานนี้ขึ้นมา

สำหรับ ผู้ที่พิการ ไม่ว่าทางสายตา หรือ ประสาทรับรู้ทั้งหลายแหล่
ต้องเข้าถึงเว็บนั้นๆได้เท่าเทียมกับผู้ปรกติทุกอย่าง มาตรฐานจึงกำหนดขึ้น

มี 3 ระดับ (Priority)

ความสำคัญระดับที่ 1 หมายถึง ต้อง ปฏิบัติตามแนวทาง
ซึ่งเป็นความต้องการพื้นฐานของคนพิการเพื่อการเข้าถึงข้อมูลข่าวสาร

ความสำคัญระดับที่ 2 หมายถึง ควรจะ ปฏิบัติตามแนวทาง
เพื่ออำนวยความสะดวกให้กับคนพิการ

ความสำคัญระดับที่ 3 หมายถึง อาจจะ ปฏิบัติตามแนวทางก็ได้ ซึ่งหมายความว่า ถ้าปฏิบัติตาม คนพิการที่ต้องการเข้าถึงข้อมูลข่าวสารก็สามารถทำได้ง่ายขึ้น

โดยแบ่งเป็น

ความสำคัญระดับที่ 1 = A
ความสำคัญระดับที่ 2 = AA
ความสำคัญระดับที่ 3 = AAA

ส่วนตัว ยังหาข้อมูลตรงนี้ไม่พอครับ ก็ได้คร่าวๆมาว่า
มันเป็นความต้องการของผู้พัฒนาเว็บเองแหล่ะครับ ว่าจะเผื่อไว้ให้ผู้พิการด้วยหรือปล่าว

อย่างรูปภาพ ควรสื่อด้วยตัวหนังสือกำกับด้วยทุกครังเช่น
ภาพ guitar แต่ชื่อไฟลภาพคือ gt23409.jpg ก็ควรจะใส่ alt="xxx" และ title="xxxx" กำกับภาพไว้ด้วย
เพราะผู้พิการทางสายตา จะได้พอนึกภาพออก เมื่อมาเจอ tag นี้ (เขามีเครื่องช่วยอ่านน่ะ)

พวกปุ่ม link ต่างๆ ที่เป็นภาพเช่นกัน  ควรสื่อความหมาย ใส่ title="" ไว้ด้วย

อ๊ากกกกก  ตีสามครึ่งแล้ว ขอนอนก่อนครับ ไว้มาต่อครับ

// เพิ่มเติมที่มาครับ อ่านมาจากที่นี่ http://www.rd.go.th/accessibility/32523.0.html