Tag: xhtml

เมื่อเดือนที่แล้วมีข่าวดีของคนรัก iPhone คือ App Store ได้อนุญาติให้มี 3rd party web browser ที่สามารถ install ลงในเครื่อง iPhone ได้แล้ว ผมเองก็ได้แต่เฝ้ารอดูอยู่ว่ามันจะออกมาในรูปแบบใด อย่างว่า … ถ้าว่ากันด้วยเรื่องการตลาด และ ธุรกิจแล้ว iPhone กำลังจะครอบงำ trend การทำเวปสำหรับ mobile device หรือเปล่า (ลองจับตาดูกัน) เพราะในแง่ความคิดผมแล้วมันเป็นอะไรที่มาแรงเหลือเกินฉุดไม่อยู่จริง ๆ ไม่ว่าจะเป็นผลิตภัณฑ์ใดของ Apple มันมักจะสวนกระแส ป่วนกระแส และ สุดท้ายสร้างกระแสได้ดีเสมอ กลับมาต่อกันด้วยเรื่องของเรา จากที่ผมติดค้างไว้ เมื่อปีที่แล้ว (ปีที่แล้วเลย) ว่าจะแนะนำให้รู้จักภาษาโครงสร้างใหม่ XHTML Basic 1.1 สำหรับ การทำเวปในส่วนของ mobile device นั้นบัดนี้ได้เพลาพอปลีกตัวพอหายใจได้ขยับขยายผายปอด ผายลม ออกมาแรด ๆ หายใจทิ้งทำนั่นทำนี่ได้หน่อย ก่อนจะเข้าสู่ห้วงยุ่งอีกครั้ง ก็ขอบ่น ๆ ไว้สักหน่อย สักบทความ

เกริ่นเรื่อง

กาลปางก่อน เนิ่นนานมานั้น เหล่านักพัฒนาทั้งหลาย ที่พัฒนา Web site นั้นมีแนวทางในการแก้ไขปัญหาสำหรับผู้ใช้ที่เข้ามาเยี่ยมชม Website ของพวกเขาด้วย โทรศัพท์มือถือ, palm, pda และ/หรือ เหล่า Smartphone ต่าง ๆ คร่าว ๆ หลัก ๆ ดังนี้

1. 1. คือไม่สนใจอะไรทั้งสิ้น ปล่อยให้ Browser ของอุปกรณ์เหล่านั้นแสดงผล โครงสร้างหน้าตา Website ของพวกเขาไปตามยถากรรมที่มันถูกพัฒนามา
2. 2. ดัดแปลงหน้าตาให้ใกล้เคียงกับการออกแบบที่ ออกแบบมาสำหรับ desktop screen ทั้งหลาย ด้วย CSS (handheld)
3. 3. ทำแยกออกมาเป็น version ของอุปกรณ์เหล่านี้ไปเลย desktop screen ก็อีกแบบ สำหรับมือถือนั้นก็เป็นอีกแบบแยกออกจากกัน

ครั้งนี้ผมจะเขียนแนะนำเกี่ยวกับ markup ที่ w3 นั้นพัฒนามาเพื่อสนับสนุนอุปกรณ์เหล่านี้โดยเฉพาะ และ มี feature อะไรบ้างที่ w3 นั้นเตรียมให้เรานำมาใช้กัน

ผมติดมาไว้นานมากตั้งแต่ปีที่แล้ว ที่บอกว่าถ้ามีเวลาผมจะแนะแนวทางการใช้ form ให้ถูกต้อง สะอาด และ accessibility วันนี้ก็คิดว่าคงได้เวลาแล้วล่ะ เพราะกว่าจะว่างอีกคงนานแน่ ๆ เลย เพราะตอนนี้ผมเองก็ไปมุ่งศึกษาในส่วนของ Semantic Web และ Mobile Web Technology แล้วมากกว่า อีกอย่างฝันอยากจะทำ free PDF Magazine เกี่ยวกับการสร้างสรรค์ การจุดประกาย ส่งเสริมให้เกิดความคิดสร้างสรรค์ คิดต่อยอด ให้มีในประเทศไทยบ้างแต่คงจะเริ่มจากกรอบของสิ่งที่ผมทำอยู่ รู้จัก และ ถนัด ซึ่งคิดว่าคงจะได้เห็นกันในเร็ว ๆ วันนี้ แต่อย่างไรก็ตาม ผมก็จะมาบ่น ๆ แบบเรื่อย ๆ เอื่อย ๆ ของผมแบบนี้ ต้องขออภัยที่อาจจะทำให้ ThaiCSS ดูเงียบเหงาไป อาจจะเห็นผมคนเดียวอย่างนี้บ่อย ๆ เพราะพรคงอาจจะนาน ๆ แวะเข้ามาทีแล้ว เพราะมีหน้าที่รับผิดชอบอันยิ่งใหญ่กว่าไว้รอ Surprise กันในเร็ว ๆ วัน สำหรับคนที่รัก Tweeter สามารถพูดคุยกับผมได้ทั้งวันทั้งมีสาระ และ ไม่มีสาระได้เลย (อย่างหลังคงไม่บ่อย หะ หะ) ผมใช้ username ว่า radiz ชื่อผมนี่แหละครับ แนะนำว่าให้ใช้ SNS ในทางที่มีประโยชน์นะครับ อย่าเอามันมาทำลายเวลา และ ขดสมอง

เข้าเรื่องกันดีกว่าครับ ก่อนเราจะเขียนโครงสร้างแบบฟอร์มใน xhtml นั้นเรามารู้จัก tag ต่าง ๆ ที่จะทำงานร่วมกับโครงสร้างแบบฟอร์มกันก่อนโดยผมจะกล่าวแบ่งตามประเภทของมันนะครับ (Block Element และ Inline Element) และ สิ่งที่ผมกล่าวถึงจะเป็นส่วนที่ทำงานเกี่ยวกับ Data Entry (การใส่ข้อมูล) ของแบบฟอร์มส่วนโครงสร้างร่วมอื่น ๆ ให้พิจารณาตามความเหมาะสมครับ บางคนอาจจะใช้ ul, ol หรือ dl ไม่แนะนำให้ใช้ table ในการจัด layout ของ form ครับผม มาทำความรู้จักกับ tag ที่ทำงานร่วมกับ Data Entry ต่าง ๆ กันเลยครับ

เคยได้ยินกันมาบ้างไหมครับ 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 นั้นไปใช้ จะถูกเรียกไปใช้ได้เพียงครั้งเดียว

ผมนึกถึงตอนที่ผมหัดเขียน CSS เมื่อสองสามปีที่ผ่านมา ตอนนั้นคิดอยู่อย่างเดียวว่า ต้องเขียนให้มันแสดงผลได้ใน IE ก่อน แต่พอศึกษาไป เรื่อยๆ กลับกลายเป็น ต้องเขียนให้ดูได้บน Modern Browsers ก่อน IE ค่อยตามมา ผ่านไปเกือบปี ถึงรู้ว่า ก่อนจะเขียน CSS ให้ไปหัดเขียน XHTML ใหม่เสียก่อน

เพราะถ้าเขียน XHTML ไม่ถูกหรือไม่ดี เขียน CSS ให้ตายก็ยากอยู่วันยังค่ำ

XHTML การเขียนก็แตกต่างกันออกไปอีก เขียน XHTML ให้ผ่าน W3C หรือ Markup ให้ถูกต้องนั้นก็ไม่ได้ยากเย็น แต่สิ่งที่ยากเย็นกว่าคือ เขียนยังไงให้ถูกตามหลักโครงสร้าง และหลัก Web Accessibility

XHTML และ CSS มีหลักการใช้งานแยกออกเป็นหมวดหมู่เหมือนกัน เช่น แต่ละ Element เอาไว้ใช้กับข้อมูลประเภทไหน ส่วน CSS บาง Property ที่เอาไว้ใช้กับ เสียง ภาพ หรือ page ก็จะมีคำสั่งแตกต่างกันออกไป แต่ตอนนี้ส่วนใหญ่เรายังสับสนอยู่แค่ อันไหนมันอินไลน์ อันไหนมัน บล๊อก อันไหนมัน ลิสต์ อันไหนมันตารางวะ

ผมเคยเจอกับตัวเอง ครั้งหนึ่งมีคนมาถามว่า ของบางอย่างมันใช้ยังไงหรือครับ ผมก็ตอบไปตามหลักการและทฤษฎี ที่มันต้องเป็น เขาถามต่อว่าทำไมมันต้องเป็นแบบนั้น เพราะที่เคยทำมาไม่เคยเห็นต้องเขียนแบบนั้นเลย ผมก็ตอบไปว่า ก็มันผิดไงหละครับ ก็ต้องปรับให้มันถูก แล้วมันก็จะสามารถเขียน CSS จัดการได้ง่ายและถูกต้อง ในเมื่ออธิบายเข้าใจยาก ผมก็ส่งลิงค์ W3C ให้อ่าน คำตอบที่ได้มาก็คือ ขี้เกียจอ่าน แต่อยากรู้ว่ามันต้องทำยังไง เล่าให้ฟังได้ไหม ผมก็ขอยอมแพ้หละครับ

ไม่เชื่อก็ต้องเชื่อ ว่าวันหนึ่งผมจะยอมแพ้

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

XHTML Syntax

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