HTML5

สวัสดีครับ หลบเรื่องยุ่งๆ มาแอบเขียนบทความใหม่นิดนึง บทความนี้ได้แรงบันดาลใจมาจากบันทึกของน้องมุก (@fatidea) และ ความสงสัยของเจ้าตัวที่มาถามผมน่ะนะครับ ว่าเราจะใช้เจ้า element <header> และ <hgroup> ในกรณีใดบ้าง

ขออนุญาตเท้าความกันก่อนนิดนึงก่อนว่า HTML5 นั้นมี element ใหม่หลายตัวที่เข้ามาทำหน้าที่ครอบเนื้อหาเพื่อบ่งบอกความหมายของตัวเนื้อหานั้นๆ ให้ชัดเจนมากขึ้นครับ ย้อนกลับที่ผมได้เกริ่นนำไว้ข้างต้นครับวันนี้ผมขออนุญาตพูดถึง element ที่เกี่ยวข้องกับ ต้นขั้วเอกสาร (header) และ ตัวครอบกลุ่มหัวข้อเรื่องหลัก และ ย่อย (hgroup) ครับ

เป็นอะไรกันไม่รู้ครับ พ่อแม่พี่น้อง ช่วงนี้ ทำไม มองไปทางไหนมีแต่คน บ้า HTML5 และ CSS3 แต่บางที คงไม่ต้องหาคำตอบให้กับคำถามปัญญาอ่อนของผมก็ได้ เพียงแค่ก้มหน้าก้มตาทำหน้าที่ไปเรื่อย เรื่อยก็คงพอเพียงแล้ว

อันเรื่องราวของ HTML5 และ CSS3 นั้น ThaiCSS เองก็ใช้มานานนม เพราะมันมีมานานแล้ว จึงไม่ค่อยได้ตื่นเต้นไปเท่าไหร่

เมื่อก่อนตอนใช้ ก็มีคนหาว่าบ้า ตอนนี้เป็นไงหละ บ้ากว่ากุอีก

จริง จริงแล้ว ผมมีความกังวลใจอยู่เรื่องเดียว เรื่องเดิม ไม่ว่าจะใช้ HTML4, XHTML1 หรือ HTML5 นั่นก็คือ ปัญหาเรื่องการทำเว็บเพื่อให้เกิดการเข้าถึงอย่างเท่าเทียม เพราะว่าคนส่วนใหญ่ไม่ค่อยได้สนใจเรื่องนี้มากมายนัก ไม่ใช่ว่่าคนบ้านเรา พวกฝรั่งปัญญาอ่อนส่วนใหญ่มันก็เป็นกันเยอะ

เชื่อว่าเพื่อน ๆ พี่ ๆ น้อง ๆ เห็นชื่อเรื่องที่เกริ่นไว้คงทราบกันทันทีว่าคราวนี้ผมจะพูดถึงหนึ่งในสมาชิกหน้าใหม่ของ HTML5 ซึ่งก็คือเจ้า dialog นั่นเองครับ เนื่องจาก HTML5 นั้นมีการปรับโครงสร้างภาษา ไปค่อนข้างมากครับ เหตุผลก็คงหลีกไม่พ้นประโยชน์เหล่านี้ครับ เช่น เพื่อให้ง่ายต่อการใช้งานในการออกแบบโครงสร้าง HTML/CSS และ มีความหมายมากขึ้น (semantics) เพราะฉะนั้นเจ้า dialog จึงถูกสร้างมาเพื่อที่จะเข้ามาทำหน้าที่ในการควบคุมโครงสร้างเนื้อหาที่เกี่ยวข้องกับกรณีต่อไปนี้ครับผม

• บทสนทนาระหว่าง คนสองคน หรือ หลาย ๆ คน
• บทสัมภาษณ์
• บทละคร ที่เป็นการสนทนากันระหว่างตัวละคร
• และ อื่น ๆ ที่เกี่ยวข้องกับการสนทนา ปฏิสัมพันธ์ระหว่างคนสองคนขึ้นไป

ใน HTML5 นั้น dialog จัดอยู่ในหมวดของ Flow Content ชนิด Grouping Content (@pornAntha จะอธิบายเกี่ยวกับหมวด และ ชนิดของ elements ใน HTML5 เร็ว ๆ นี้ครับ)

คำเตือน บทความนี้เป็นบทความเฉพาะกลุ่มเป้าหมาย เนื้อหาส่วนใหญ่ไม่ได้อยู่ในโลกปัจจุบัน ไม่ค่อยเหมาะสำหรับคนที่มองอนาคตระยะ 15 เมตร

คำเตือนที่สอง เนื้อหานี้ ไม่เหมาะสำหรับผู้ใช้ทั่วไป และ ตัวอย่างทั้งหมด ไม่สามารถใช้ User Agent ที่เป็น Browsers อย่าง IE ทั้ง 6-7-8 เรียกดูได้ เพราะฉะนั้น กรุณาใช้ Firefox, Opera, Safari, หรือ Chrome เข้าชม

คำเตือนที่สาม ผมเกรียน...

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

-1-

คำถามชุดที่หนึ่ง ราคา สี่ร้อยเก้าสิบเก้าบาท

ถามว่า HTML5 จะใช้ได้ในเร็ววันนี้หรือไม่

คำตอบคือ ทั้งใช่ และไม่ใช่ อย่างไรบ้างหละ

สำหรับคำตอบที่บอกว่า ยังไม่ได้ใช้ในเร็ววันนี้ ก็คงจะเอนเอียงไปทางผู้ที่ทำเว็บเพื่อรองรับเนื้อหาข่าวสารที่พึ่งพิงผู้ที่ใช้ IE เข้าท่องเว็บไซท์เป็นหลัก เพราะ HTML5 บางElement (ส่วนใหญ่) ยังคงเป็นบรุษนิรนาม ใน IE8 เราอาจจะต้องรอจนถึง IE9 นั่นอาจจะเป็น ปลายปี 2012 หรือ ช้ากว่า

สำหรับคนที่บอกว่า จะได้ใช้แล้วแน่ๆ ก็คงเป็นนักพัฒนา นักแสวงหาความรู้ใหม่ๆ ทั้งหลาย เจ้าของ Web Log ที่อยากจะลองเล่นเพื่อศึกษาหาประสบการณ์ เพื่อเตรียมความพร้อมสำหรับอนาคตที่ไม่รู้ว่ามันจะมาถึงเมื่อไหร่ เช่น ป๋า Bruce Lawson ที่ลองเล่นไปก่อนใครแล้ว (ใช่สิ เพราะลุงแกพัฒนาเอง เล่นเองนี่)

ใครจะเลือกแบบไหน ก็ตามสบายครับ ไม่ว่ากัน บ้านเราสิทธิและเสรีภาพ เข้าถึงแล้ว เหลือเพียงแค่ความเท่าเทียม ที่มันยังไม่มี

คำถามชุดที่ 2 ราคา สองพันสามบาท

ถามว่า CSS3 ใกล้จะได้ใช้หรือยัง

คำตอบ เอาเป็นว่า เราอาจจะได้ใช้พร้อมๆ กับวันที่บ้านเรามีรถไฟความเร็วสูงจากกรุงเทพ ไปเชียงใหม่ นั่นแหละ แต่สำหรับคนที่ใฝ่หาและอยากลอง ?คุณได้สิทธิ์นั้น เดี๋ยวนี้? แค่เปลี่ยนจากการถามสาวยาคูลล์เป็นถามพี่กูเกิลแทน คำตอบจะหลั่งไหลเลยทีเดียว

ผมไม่ทราบว่าเพื่อน ๆ designer, Media Agency และ บริษัทต่าง ๆ ส่วนใหญ่ในประเทศเรามี process การทำงานกันอย่างไรบ้าง แต่เท่าที่สอบถามคนรอบข้างนั้น หลาย ๆ คนยังไม่เคยใช้หลักการระดมสมองที่เรียกว่า Wire Framing นี้ น้อยคนมากที่รู้จัก หรือ อาจจะทำอยู่เป็นนิจแต่ไม่รู้ว่า ไอ้สิ่งที่ทำนั้นมันคือ อะไร ผมเองก็เพิ่งรู้จักมาเมื่อไม่กี่เดือนนี้เหมือนกัน ว่าสิ่งที่เราทำบางครั้งก่อนลงมือทำงานขั้นตอนหนึ่ง มันเรียกว่า Web Wire Framing ต้องขอบพระคุณพี่เอ้ @DjFunkyDog ที่เปิดหูเปิดตา และ เอื้อเฟื้อเวลานั่งสอนน้องคนนี้มา ณ ที่นี้ เป็นอย่างมากครับ (สอนโดยไม่รู้ตัวบางทีก็มี เอิ๊ก ๆ) ก่อนอื่นผมจะขออนุญาติอธิบายเกี่ยวกับ Wire Frames ก่อนนะครับ

Wire Frame นั้นเป็นขั้นตอนที่ ทุกคนที่เกี่ยวข้องในตัวผลิตภัณฑ์นั้น ๆ ต้องร่วมกันแสดงความคิดเห็น ก่อนลงมือผลิตเจ้าผลิตภัณฑ์นั้น ๆ ขึ้น เหมือนเป็นการร่วมกันร่าง พิมพ์เขียวของเจ้าสิ่ง ๆ นั้นขึ้นมา โดยแต่ละทีมนั้นสามารถทำ Wire Frame ของแต่ละทีมมาก่อน ก่อนที่จะ Finalize Wire Frames ของเจ้าผลิตภัณฑ์ที่จะสร้างขึ้นนั้นอีกทีเป็นรอบปิดท้าย

ผมขออนุญาติเรียนไว้ก่อนว่า wire framing นั้นไม่มีรูปแบบตายตัวในแต่ละผลิตภัณฑ์ และ ขั้นตอนการทำงานของแต่ละคน / บริษัท นั้นก็จะมีการ wire framing แตกต่างกันไปด้วย เพราะฉะนั้น พื้นที่นี้เป็นพื้นที่สำหรับการแลกเปลี่ยนครับ ถ้าเพื่อน ๆ พี่ ๆ น้อง ๆ มี idea ที่ดีกว่า หรือ แตกต่างอยากให้ share กันครับผม

XHTML ส่วนใหญ่ในเวปที่เราเห็น ๆ กันอยู่นั้นใช้ content type แบบ text/html พูดง่าย ๆ มันก็ยังเป็น ต้มยำ tag ที่ทำงานในแบบ XML ไม่ได้เป็น XML ไปเสียทีเดียว