เนื่องจาก ไปอ่านเว็บ thaicss.com มา เพราะเริ่มศึกษา css รวมถึงอ่านที่นี่ด้วย ความรู้แน่นกันจริงๆ :12:
ทีนี้ มันเริ่มลาม เพราะไปอ่านเจอเรื่อง W3C มาตรฐานเว็บที่ควรจะเป็น :38:
ก็เลยคึกพอสมควร และบ้าพลัง เลยตัดสินใจ รื้อทิ้งเว็บหนึ่งที่ดูแลอยู่ เพราะอยากลองทำ
โดย ประกาศกับตัวเองว่า
จะเอาให้ผ่าน W3C แบบได้คำนี้มา "This Page Is Valid XHTML 1.0 Transitional!"
และก็ CSS รวมไปถึง WAI-AAA WCAG 1.0
โดย ทุกหน้าของเว็บ ต้องผ่านหมด บางเว็บผ่านแค่หน้าแรก :35:
:48: ไม่เอา จะเอาทุกหน้า :42:
มาแบ่งปันวิธีแก้ปัญหากันครับ ผมเพิ่งลองประมาณ 2 อาทิตย์ ได้มานิดหน่อย
-------------------------------------------------------------------------------------------
เริ่มแบ่งปันด้วยการ สอนจรเข้ว่ายน้ำให้ไปซื้อมะพร้าวห้าวมาขายสวน นะครับ :42:
-------------------------------------------------------------------------------------------
ขั้นตอนแรกที่จะเริ่มเดินทางสายมรณะ
ควรจะใช้ firefox browser ครับ สะดวกมากๆ ถึงมากที่สุด และ มันสะดวกจริงๆนะเอ้า สะดวกยังไง
เพราะมันมีตัว อทช web developer ซึ่งหลายท่านที่นี่รู้จักกันดีอยู่แล้ว (ผมมารู้จัก ที่นี่แหล่ะ)
(http://img2.f0nt.com/20/6f72db2d2b79440e1d02c9cba2fa3cb7.jpg)
จากรูปบน คือเปิดการใช้งาน display page validation ในตัว web developer
(http://img2.f0nt.com/20/14d22cb83298d38da68d336e3d3c4235.jpg)
จากรูปบน เราจะเห็นแทปเพิ่มขึ้นมา มี page validation HTML: xxx CSS:xxx Accessbility: xxx
อีส่วนนี้แหล่ะครับ Validation สำหรับ html xhtml css
จะเห็นว่ามันสามารถ validdate online หน้าเว็บนั้นๆได้เลย โดยไม่ต้องเข้าเวบ W3C.org ให้เมื่อยตุ้ม
และอีกอย่างนึงครับที่สะดวกมากๆ valid ผ่าน localhost ในเครื่อง ของเราได้เลย (ต้องต่อเน็ท)
โดยเวบหลักไม่สามารถทำได้ครับ(ลองแล้วไม่ได้น่ะครับ )
เอาล่ะครับ ลองไปเปิด เว็บต่างๆเล่นๆดูครับ ว่า เอ๋อเร๋อ กันกระจุยกระจายขนาดไหน :43:
เดี๋ยวมาต่อครับ
:12:+ มาแนวความรู้แบบนี้ชอบครับ
(แต่ส่วนตัวคือ รู้สึกว่าอยากทำเว็บให้มนุษย์ดูครับ ไม่ได้ให้หุ่นยนต์ดู ก็เลยแกล้งลืมๆ ไป)
:25: :25: :25:
มารอดูเลยครับ
บมค่าชวก ครับ :33:
ตอนนี้เว็บที่ผมลองทำอยู่ โดยรวม รุ่นทดลอง เสร็จไปแล้ว 40% ก็หลายสิบหน้าอยู่ (แบบไดนามิค)
โดยทุกหน้า ผม Validate ผ่านผมด เขียวสองอันอย่างที่เห็นน่ะครับ
(http://img2.f0nt.com/20/14d22cb83298d38da68d336e3d3c4235.jpg)
-----------------------------------------------------------------------------------
แน่นอน รูปแบบเว็บเป็นแบบ แยกเนื้อหา กับ ดีไซน์
เป็น PHP+ XHTML 1.0 Transitional และ CSS
การประกาศ Doctype ส่วนแรกที่สำคัญห้ามมองข้าม
XHTML 1.0 Transitional กับ Strict หรืออื่นๆนั้นต่างกันอย่่างไร ควรเป็นแบบไหน อ่านที่นี่ครับ thaicss.com (http://www.thaicss.com/main/doctype.html)
ปัญหาแรกเลยที่เจอคือโค้ดโปรแกรมของ php
การส่งผ่านตัวแปรต่างๆผ่าน get แบบต่อท้าย url พวก index.php?id=xx&page=xx
ปรกติบางคนที่ใช้ editor ทั้งหลายแหล่แบบลุ่นๆ อาจจะเขียนแบบนี้ เช่น
<a href="index.php?id=xx&page=xx">link</a> แบบนี้ ไม่ผ่านครับ ผิดหนึ่งตัวอักษร และถ้าผิดสักตัวอักษรล่ะก็
มันจะฟ้องเอ๋อเร๋อ ลามปามไปมั่วหมดเลย ตรงนู้นตรงนี้ก็ผืิดไปหมด (แม่งเมาแน่ๆ ตูเขียนถูกแล้วเฟ้ย :07:)
ก็ผิดจริงแหล่ะครับ ผิดตัวเดียวที่ตัวอักษร "&" ครับ ที่ถูกต้องแบบนี้ครับ
อ้างอิง<a href="index.php?id=xx&page=xx">link</a>
ต้องใส่เป็นโค้ดตัวอักษรพิเศษด้วยครับ แบบที่ดรีมมันชอบใส่ให้น่ะครับ
และถ้าแก้เพียงหนึ่งตัวอักษร บางครั้ง มันจะลด error ได้จาก สามสิบ กลายเป็น สิบแปด ก็เป็นได้ครับ :08:
เรื่องอักขระพวกนี้โปรๆขึ้นมาหน่อย ก็รู้แหล่ะครับ
พอดีเพิ่งหัดเขียน PHP+CSS+XHTML เลยเอาเรื่องที่เจอๆมาบอกกันน่ะครับ
เอ้าใครเก่งๆเรื่องนี้มาแจมๆกันเร้ววว ผมเพิ่งหัดคลานเน้อ สองอาทิตย์เอง
เรื่องอักขระพิเศษนี้ละครับ เยอะเลย :08:
> < & ^ # @ ! $ บลาๆ :05: :05:
ความเห็นส่วนตัวเหมือนคุณแอนนนนน 100% เลยแหล่ะครับ :12:
และเซ็งเรื่องมาตรฐานที่ไม่ยอมเท่ากันซะทีเรื่อง browser
ก็เลยอยากลอง ทำสิ่งที่มนุษย์ดูนี่แหล่ะ แต่บังคับให้ไอ้หุ่นเฮงซวยนั่นเข้าใจครับ
อ๊ะ :41: พอๆ ต่อๆๆ
เรื่องอักขระ น่าเป็นห่วงสำหรับ PHP ก็พวกนั้นแหล่ะครับ
> = >
< = <
& = &
หากต้องการแสดงผลบนหน้าเว็บ ต้องเขียนตามนั้น
หากจะเขียนในส่วนโปรแกรม php ก็เขียนปกติ
ผมเขียนบรรทัดนึง เช็คทีนึึง :05: คือเขียนเยอะๆแล้วงงได้ใจเลยครับ
ถึงบอกว่า อทช ตัวนี้สะดวกมากๆที่จะลองทำเว็บแบบ xhtml
เดี๋ยวมาต่อ เรื่องที่ปวดหัวๆเจอๆมาครับ
อ๋อ เงาไว้ไม่ทันอ่าน
พอเข้า web 3.0 นะมันจะเอาไอมาตรฐานนี้มาใช้ในการโยงใยไซเบอร์ให้เราเลยอะ :25:
แต่ว่า แก้เกือบหมดทุกเว็บเลยนะ :08: :08:
การปิด 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" />
นี่แหล่ะครับ ตัวดีที่ชอบลืม
พวกช่องว่างบางช่อง ก็ควรใส่ ไว้กันเหนียวเช่นพวก
<div class="empty"> </div> หากวาง div ว่างๆ ก็ใส่ไว้หน่อยครับ
และก็ CSS พวก ID ทั้งหลายอย่าเอามาซ้ำกัน ใน 1 หน้าควรมีี ID นั้นอันเดียวครับ
ถ้าต้องการใช้ซ้ำให้ประกาศเป็น class ครับ (อันนี้รู้กันอยู่แล้วหรือปล่าว ผมเพิ่งมารู้ตอนทำ validate นี่ล่ะ :23: )
เอ้าใครมีประสบการณ์มาช่วยกันหน่อยครับ
เจี๊ยก ตูใช้ ID ซ้อนกันตลอดเลยนะ :44:
ไม่รู้เลยว่า ID กะ Class มันต่างกันยังไง
:44:
ลอง validate ดูสิครับ แล้วจะพบความสุขมหาโหด
ถ้าไม่อยากแก้ อย่าไปเดทมันครับ ช้ำใจปล่าวๆ
อย่างฟอรั่มหน้านี้ Invalid: 89 errors :38: แล้วเป็นไง :11: ก็แสดงผลได้ดีไม่มีเพี้ยน
ไม่ต้องไปสนมันอย่างที่ตั้งใจแหล่ะครับ ดีแล้ว
ผมลองทำแค่เว็บเดียว เอาความรู้แหล่ะครับ (ตังค์ก็ไม่ได้ แต่แลกกับความรู้น่ะครับ)
ทำเอามันส์ครับ :42:
ID กับ class ยังไม่แตกฉานเลยครับ
เท่าที่รุ้ล่าสุดก็ ไม่ควรซ้ำ ID ในหนึ่งหน้า แต่ class ซ้ำได้ เอามาต่อยอดได้
คือ อีกไม่นานก็คงต้องดำเนินตามรอยมาตรฐานแหละครับ
แต่ปัจจุบันนี้เอาแค่พอถูไถไปก่อน ให้ตามมาตรฐานเด๊ะๆ นี่คงหอบแดร๊กแน่เลย :44:
เข้ามาบวกครับ :27:
โดยส่วนตัวผมก็อยากทำเว็บตามมาตรฐานนะ
แต่เวลาศึกษาบทความเกี่ยวกับ web standard ทีไรก็เกิดอาการขี้เกียดขึ้นมาอัตโนมัติ :41:
หอบสุดๆเลยล่ะครับ ยิ่งเอามารวมกะ PHP ด้วยนะโหยยยย ไหนจะประสาทกินกะ CSS อีก
ถ้ารับจ้างทำนี่ อาจต้องบวกราคาเพิ่มครับ
(http://img2.f0nt.com/20/87eb26adac8069e906cf9aee2e86fc6a.jpg)
ประมาณว่า
แอนนนนน : "คุณลูกค้าครับ อยากได้ โลโก้แบบนี้ไว้มั๊ยครับ เพราะมันมาตรฐาน ดีอย่างโน้น ..... bla bla bla....."
คุณลูกค้า : "เออ เอาสิๆๆๆ ดีออก มันสมควรแบบนั้นแหล่ะ ตกลงๆ ผมเอา ทำแบบมาตรฐานนะ"
แอนนนนน :"ขอบวกเพิ่ม 10000 นะครับ เพราะยุ่งยากมาก กว่าจะขึ้นมาตรฐานครับ"
คุณลูกค้า : " :38: ....... :34: ไม่เป็นไรๆ ไม่ต้องมาตรฐานก็ได้ เอาแค่ดูได้พอแล้ว"
แอนนนนน : " :05: "
ขอแก้บรรทัดสุดท้ายเป็น :30: ครับ
อ้างอิงแอนนนนน : "คุณลูกค้าครับ อยากได้ โลโก้แบบนี้ไว้มั๊ยครับ เพราะมันมาตรฐาน ดีอย่างโน้น ..... bla bla bla....."
คุณลูกค้า : "เออ เอาสิๆๆๆ ดีออก มันสมควรแบบนั้นแหล่ะ ตกลงๆ ผมเอา ทำแบบมาตรฐานนะ"
แอนนนนน :"ขอบวกเพิ่ม 10000 นะครับ เพราะยุ่งยากมาก กว่าจะขึ้นมาตรฐานครับ"
คุณลูกค้า : " :38: ....... :34: ไม่เป็นไรๆ ไม่ต้องมาตรฐานก็ได้ เอาแค่ดูได้พอแล้ว"
แอนนนนน : " :30: "
:30: :30: :30: :30: อ๊ะ :41: ออกนอกเรื่องอยู่เรื่อย ต่อๆ
เห็นโลโก้ด้านบนใช้ใหมครับ อันสุดท้ายคือ WAI WACG
ไอ้อันนี้แหล่ะครับ ส่วนสำคัญพอสมควรเลยล่ะ
แว่วๆว่า บางแห่ง (ที่ไหนล่ะ ... นั่นน่ะสิ ) อ่านเจอผ่านๆ มาครับ
เกี่ยวกับสิทธิการเข้าถึงเว็บไซท์นั้นๆ เพื่อให้คนทุกระดับเข้าถึงได้โดยเท่าเทียมกัน
จึงสร้างมาตรฐานนี้ขึ้นมา
สำหรับ ผู้ที่พิการ ไม่ว่าทางสายตา หรือ ประสาทรับรู้ทั้งหลายแหล่
ต้องเข้าถึงเว็บนั้นๆได้เท่าเทียมกับผู้ปรกติทุกอย่าง มาตรฐานจึงกำหนดขึ้น
มี 3 ระดับ (Priority)
ความสำคัญระดับที่ 1 หมายถึง ต้อง ปฏิบัติตามแนวทาง
ซึ่งเป็นความต้องการพื้นฐานของคนพิการเพื่อการเข้าถึงข้อมูลข่าวสาร
ความสำคัญระดับที่ 2 หมายถึง ควรจะ ปฏิบัติตามแนวทาง
เพื่ออำนวยความสะดวกให้กับคนพิการ
ความสำคัญระดับที่ 3 หมายถึง อาจจะ ปฏิบัติตามแนวทางก็ได้ ซึ่งหมายความว่า ถ้าปฏิบัติตาม คนพิการที่ต้องการเข้าถึงข้อมูลข่าวสารก็สามารถทำได้ง่ายขึ้น
โดยแบ่งเป็น
ความสำคัญระดับที่ 1 = A
ความสำคัญระดับที่ 2 = AA
ความสำคัญระดับที่ 3 = AAA
ส่วนตัว ยังหาข้อมูลตรงนี้ไม่พอครับ ก็ได้คร่าวๆมาว่า
มันเป็นความต้องการของผู้พัฒนาเว็บเองแหล่ะครับ ว่าจะเผื่อไว้ให้ผู้พิการด้วยหรือปล่าว
อย่างรูปภาพ ควรสื่อด้วยตัวหนังสือกำกับด้วยทุกครังเช่น
ภาพ guitar แต่ชื่อไฟลภาพคือ gt23409.jpg ก็ควรจะใส่ alt="xxx" และ title="xxxx" กำกับภาพไว้ด้วย
เพราะผู้พิการทางสายตา จะได้พอนึกภาพออก เมื่อมาเจอ tag นี้ (เขามีเครื่องช่วยอ่านน่ะ)
พวกปุ่ม link ต่างๆ ที่เป็นภาพเช่นกัน ควรสื่อความหมาย ใส่ title="" ไว้ด้วย
อ๊ากกกกก :03: ตีสามครึ่งแล้ว ขอนอนก่อนครับ ไว้มาต่อครับ
// เพิ่มเติมที่มาครับ อ่านมาจากที่นี่ http://www.rd.go.th/accessibility/32523.0.html
เพิ่มเติมที่เจอมาอีกครับ
พวก form กรอกข้อมูลต่างๆ ควรจะมี default value ด้วยทุกครั้ง เช่น
<input type="text" size="25" maxlength="15" name="sch" id="sch" value="" title="Input Keyword for search" accesskey="a" />
อย่างตัวอย่างนี้ ผมกำหนดข้อมูลหลอกไว้เป็น ""
คืออย่างน้อยก็มี value ล่ะ ถึงจะว่างเปล่าแต่ก็มี
เพราะถ้าเป็นช่องกรอกข้อมูลเพื่อ search ก็ไม่ควรมีอะไรมาโชว์อยู่ในช่อง
ถ้ากำหนดค่าลงไป มันจะขึ้นโชว์หราอยู่ในช่องกรอกข้อมูล เป็น defualt value
:08: งงมั๊ยครับ :05: เขียนเอง อ่านเองยังงงเลย
ต่อไป
tag ต่างๆ(เพิ่มเติม)
<br> ควรจะเป็น <br /> แต่อันนี้ถ้าใช้ css แล้ว ไม่ค่อยควรใช้เท่าไรครับ
<hr> ควรจะเป็น <hr />