Radiz Sutthisoontorn

ไม่ได้เขียนอะไรเกี่ยวกับการลงมือทำบ้างเลย เขียนแต่เรื่อง concept แนวคิดมานานพอสมควรแล้ววันนี้ท่านเจ้าสำนักของเรา แยบ ๆ ผมมาว่าปลาเอ้ย เขียนเกี่ยวกับวิธีการปฏิบัติสักหน่อยสิ นักเขียนท่านอื่น เขาไม่ส่งบทความมาเสียที เขียนไปก่อนละกัน โอเค ก็ไม่รู้จะเขียนอะไรน่ะนะ O_o นั่งคิดอยู่นาน เอา Rollover Navigation ละกันนะ แบบแรกเป็นรูปภาพ Rollover ง่าย ๆ เลยละกัน เผื่อท่านใดอยากได้แนวทางการนำไปใช้ ถ้าท่านใดรู้แล้วก็มาแลกเปลี่ยนกันเผื่อจะได้อะไรที่มันประหยัดกระทัดรัด เอามาอวดมาเฉิดฉายกันหน่อย ในส่วนของ xhtml

เริ่มต้นเลยเรื่องของการออกแบบ คุณจะต้องออกแบบให้ครบทั้ง 2 สถานะ หลาย ๆ สถานะเอาไว้ก่อนไว้พูดกันวันอื่นวันนี้เอาเริ่ม ๆ ประเดี๋ยวจะโดนโพสด่าเอา ปกติก็เขียนเดา ๆ เมา ๆ อ่านไม่เข้าใจอยู่แล้ว เข้าเรื่อง ๆ เมื่อออกแบบ Navigation Bar ของเราครบสองสถานะแล้ว ให้เอามาเรียงตัวกันแบบนี้ครับ (สถานะปกติวางไว้ด้านบน, สถานะไม่ปกติเอ้ยสถานะที่ Rollover เมื่อเอาเมาส์มาวางเหนือมัน เอาไว้ข้างล่าง) ดังภาพประกอบ

(ภาพใช้ประกอบการสาธิต ห้ามนำเอาไป copy ดัดแปลง หรือ ทำซ้ำ ถ้าจับได้มีความผิดทางกฏหมาย และ ผิดที่ไว้ใจ)

เมื่อได้สมอารมณ์หมายแล้วเราก็ฟันมันซะ เอ้ยตัดมันซะ แยกกันเป็นก้อนเพื่อนำไปใช้งาน ดังตัวอย่างนี้ครับ

แล้วก็ตั้งชื่อให้สัมพันธ์กับการใช้งานซะ เช่นปุ่มนี้เป็นปุ่ม "home" ก็ตั้งชื่อมันว่า "home.jpg" ไม่เอาแบบนี้นะ "Nav-001.jpg" ไม่เอานะครับ เพราะอะไร … ก็เพื่อ findability ไงครับ เพื่อการสืบค้นที่ดี แล้วทำไมต้อง JPG ไม่ใช่เพราะอยากโชว์ว่าโฮสฉันแรงต้องดูความละเอียดของงานที่ออกแบบมาด้วย ถ้าไม่หวือหวามากก็ไม่ต้องอาศัยความละเอียดมากก็ได้ครับ เช่น ถ้าการออกแบบเป็นแค่ font ที่ไม่มีอยู่ในเครื่องทั่วไป สถานะปกติ กับ สถานะ rollover แค่เพียงเปลี่ยนสรตัวหนังสือคุณก็ตัดมันออกมาเป็น GIF หรือ PNG ก็ได้ตามสะดวกเลยครับผม จากนั้นเราก็จะมาเตรียม XHTML Structure ให้หนู ๆ ของเราดังนี้

เคยได้ยินกันมาบ้างไหมครับ Common Attribute เป็นชื่อเรียกกลุ่ม Attribute ของ xhtml ที่เราจะพบเจอกับมันบ่อย ๆ ในการทำงาน หรือ ใน Website ของคนอื่น ๆattribute เหล่านี้จะถูกนำมาใช้กับ xhtml element ได้หลาย ๆ element เพื่อกำหนดบ่งชี้คุณสมบัติ หรือ คำอธิบายต่าง ๆ ให้กับ xhtml element นั้น ๆ ที่เรียกตัวมันไปใช้

ทั้งนี้ attribute ที่จัดอยู่ในหมวดนี้จะแบ่งเป็นอีก 3 ส่วนย่อย ๆ คือ Core Attribute, i18n attribute และ Event Attribute ซึ่งหน้าที่การทำงานของแต่ละส่วนนั้นเป็นอย่างไรเรามาดูไปพร้อม ๆ กันครับ

Core Attribute

ในกลุ่มนี้จะประกอบไปด้วย class, id และ title เรามาดูรายละเอียดของแต่ละตัวกันครับ

class และ id นั้นจะเป็นตัวกำหนดชื่อเรียก (label) ต่าง ๆ ให้กับ element เหล่านั้น ซึ่งชื่อเรียกเหล่านี้อาจจะเป็นตัวกำหนดการจำแนกลักษณะกลุ่มของข้อมูล กลุ่มลักษณะการทำงานของ xhtml element นั้น ๆ โดยจะร่วมทำงานกับ JavaScript หรือ css ก็ได้ และยังรวมไปถึงการเป็นจุดอ้างอิง (anchor) สำหรับการอ้างถึงภายในหน้า webpage เดียวกัน ดังตัวอย่างต่อไปนี้

<div id=”header-wrapper”>
<p class=”purple-line”>Lorem … Ipsum … blab bla bla</p>
<p>Lorem … Ipsum … blab bla bla</p>
</div>

id มักจะใช้กับอะไรที่เป็น unique คือ เป็นหนึ่งเดียว สำคัญไม่ซ้ำกับใครใน webpage หนึ่ง ๆ จะมี id ตัวนั้น เพียงแค่หนึ่งเดียว ไม่ว่าจะเป็นจุดอ้างอิง xhtml element ที่เรียก id นั้นไปใช้ จะถูกเรียกไปใช้ได้เพียงครั้งเดียว

สวัสดี ไม่ได้พูดคำนี้นานเหมือนกัน วัน ๆ ผมตื่นมาแล้วก็เปิดคอมพิวเตอร์แล้วก็ทำงาน แล้วก็หายไปในสารระบบสารสนเทศ บางวันก็ลืมไปว่าเราต้องพบหน้าค่าตาใครเค้าบ้าง ก็เลยถือโอกาสสวัสดี กับการกลับมาของ ThaiCSS ในบ้านหลังใหม่ ระบบใหม่หวังว่าคงช่วยเหลือผู้ใช้ เพื่อน ๆ แฟน ๆ นักอ่านได้มากไม่ใช่น้อย ให้สมกับที่พรทุ่มเท อดหลับอดนอนสร้างระบบนี้ขึ้นมาใหม่

วันนี้ผมจะพูดถึงอะไร ผมจะพูดถึง Findability website ชื่อมันดูโก้เก๋ดีไหมครับ มันเป็นแนวคิดใหม่ของ Aaron Walter จริง ๆ แล้วก็ไม่ใช่อะไรใหม่ไปเลยทีเดียวเพียงแต่แนวคิดเหล่านี้ยังไม่มีใครบัญญัติชื่อให้มัน ลักษณะการทำงานของมันอย่างเป็นรูปธรรม ทีนี้เรามาดูกันว่า ไอ้ Findability Web มันคืออะไร ซึ่งโดยการทำงานของมันแล้วมันก็คือ Website ที่มีเป้าหมายมุ่งเน้นช่วยเหลือผู้ใช้ให้

• เจอ website ที่พวกเขาค้นหา
• เจอ content ที่ต้องการใน website นั้น ๆ
• หรือ รับรู้ถึงคุณค่า ของ content ใหม่ ๆ ที่พวกเขาค้นเจอ

naked day ปีนี้ในไทยเงียบเหงา อาจจะเป็นเพราะพวกผมเงียบไป หรือ อย่างไร แต่ไม่เป็นไร
ใครที่ผ่านเข้ามาเจอะ ถ้าอยากเข้าร่วมสนุก ก็เชิญแวะมาอวดโฉมความเป็น semantic ของข้อ
มูลในเวปของคุณกัน

CSS Naked Day (วันเปลือย CSS) ปีนี้ 9 April 2008 โดย Dustin Diaz

เพื่ออะไร? เพ่ือโชว์ ความเป็น Web Standards ของเวปไซท์ของคุณ ความเป็น Semantic ในการจัดเรียงโครงสร้างให้กับเวปไซท์ นั้น ๆ ที่จะเข้าร่วม และ แน่นอนตามชื่อของมัน มันเป็นวันที่เราจะโชว์ <body> เวปของเราเปล่า ๆ โดยไม่มีเจ้าหนู CSS มาป๊วนเปี๊ยน

ผู้เข้าร่วมสนุก สามารถแทรก code เหล่านี้ไว้ในหน้า page ที่เปลือยเปล่านั้นของคุณ เพื่อบอกเล่าว่าเรากำลังเข้าร่วมเทศกาล Naked Day นี้อยู่

จากครั้งที่แล้วที่ผมแนะนำ tools ต่าง ๆ ในการเตรียมตัวทำ Web Accessibility ไปผมอยากจะแนะนำ extension อีกตัวหนึ่งของ FireFox ที่เอาไว้สำหรับการตรวจสอบ การอ่านหน้า web page ของ screen reader เป็น extension ที่ดีอีกตัวหนึ่งที่อยากจะแนะนำให้ลองใช้ เจ้าหนูตัวนี้ชื่อว่า “Fangs” เชื่อว่าหลาย ๆ ท่านคงเคยได้ใช้ หรือ ถ้ายังไม่เคยได้ยินก็ลองดูได้เลยครับ วิธีใช้ก็ง่ายนิดเดียวเปิด Web Page ที่คุณต้องการจะทดสอบ และ คลิกขวาลงบน Web Page นั้น ๆ แล้วเลือก View Fangs บางทีอาจจะมี bugs ที่ Fangs ไม่แสดงผล ให้ลองปิด แล้วทำขั้นตอนที่ผมบอกไปข้างต้นใหม่อีกครั้ง Fangs ก็จะแสดงผลออกมาเอง

โอเคครับเข้าเรื่องกันดีกว่า เรามาต่อกันจากตอนที่แล้วที่ผมเขียนไว้เมื่อ เดือน หรือ สองเดือนที่แล้วกัน กับบทความนี้ผมจะเรียบเรียงรวบขั้นตอนเบื้องต้นของการทำ Web Accessibility ง่าย ๆ มาแลกเปลี่ยนกัน (ไม่ขอสอนนะครับ วิธีผมบางอย่างมันอาจจะไม่ดีก็ได้อยากให้เพื่อน ๆ ที่มีความรู้เรื่องนี้มาช่วยกันแลกเปลี่ยนความคิดเห็นกัน) การทำ Web Accessibility เบื้องต้นนั้น ที่ผมคิดว่าเราน่าจะทำได้ ง่าย ๆ เลย น่าจะเป็นเช่นนี้ครับ

1. เขียน xhtml และ css ให้ถูกต้อง
2. ทำเวปโดยไม่ต้องใช้ frame
3. เชค Accessibility ของ Web Page
4. ใส่คำอธิบายภาพให้กับรูปภาพที่เราใช้ alt=”” และ title=“”
5. JavaScript ที่ใช้อยู่นั้น สร้างความรำคาญให้กับผู้ใช้หรือไม่
6. ขนาดของตัวหนังสือเหมาะสมแล้วหรือไม่
7. เขียน code ให้มีความหมาย
8. เมื่อปลด css ออกแล้ว content ของคุณปะติดปะต่อกันรู้เรื่อง หรือไม่
9. ลองใช้ fangs ตรวจดูว่า screen reader อ่านเข้าใจหรือไม่

ก่อนอื่นสวัสดี พวกเราหายไปนาน ไปเคลียร์งานที่สุมไว้ที่โต๊ะ ไปทำหน้าที่ที่ต้องทำ แต่ไม่ได้ลืมไม่ได้ทิ้งหน้าที่ ณ​ ที่แห่งนี้ ช่วงที่หาย ๆ ไปก็ได้เห็นว่าหลาย ๆ คนยังไม่เข้าใจ เรื่องเล็ก ๆ ง่าย ๆ ของ xhtml อยู่ วันนี้ผมจะเอาสิ่งง่าย ๆ ที่เพื่อน ๆ มองข้ามมาอธิบายให้เข้าใจถึงแก่นมันก่อน สำหรับคนที่เดินไปหน่อย ไปไกลแล้ว แต่ยังไม่รู้ก็รู้ไว้บ้างก็ดี ขออนุญาติผมได้สอนท่าน ๆ เทพ ๆ ทั้งหลาย ซักบทความละกันนะครับ

XHTML Syntax

หรือ หลักการณ์เขียน XHTML การเขียน XHTML ที่ถูกต้องนั้นง่ายนิดเดียวครับ จำง่าย ๆ เลยว่าข้อมูล จะเป็นตัวกำหนด elements ที่จะเอามาครอบมัน โดยเลือก tag และ attribute ของ XHTML มาอธิบายความหมายของมัน ให้เหมาะสม อย่างไร? ง่าย ๆ ครับสมมติว่าผมมีข้อมูล “ที่อยู่” อยู่ชุดหนึ่ง ดังนี้: นาย สุดเทพ ชอบโกงกิน บ้านเลข 12 หมู่ 16 ถ. บ้านคำปากหาย อ. หมอกแหงนหงาย จ. แขบชายดอน รหัสไปรษณีย์ 46850เมื่อผมต้องการเขียนในรูปแบบเอกสาร XHTML แล้วผมจะเลือกใช้ tag ใด กับข้อมูล ข้อมูลนี้ ผมก็ต้องเลือกใช้ tag “address” กับข้อมูลชุดนี้ดังนี้: